How to use CSS+JS to help you achieve Apple cover flow effect
Editor to share with you how to use CSS+JS to help you achieve Apple cover flow effect, I hope you will learn something after reading this article, let's discuss it together!
Coverflow-demo div.innerWrapper {perspective: 300px; width: 600px; height: 300px; margin: 100px auto; display: flex; align-items:flex-start; background-color: # 000; overflow: hidden; padding-top: 5% } div.cover {height: 50%; flex-grow:1; transition: all .5s ease; background-size: 100% 100%; background-repeat:no-repeat; margin: 0;-webkit-box-reflect:below 5% linear-gradient (transparent, white); border: 1px solid # fff } div.cover:nth-child (1) {background-image: url ('covers/computergraphics-album-covers-2014-15.jpg');} div.cover:nth-child (2) {background-image: url (' covers/Funkadelic-Maggot-Brain-album-covers-billboard-1000x1000.jpg') } div.cover:nth-child (3) {background-image: url ('covers/Green-Day-American-Idiot-album-covers-billboard-1000x1000.jpg');} div.cover:nth-child (4) {background-image: url (' covers/insurgency-digital-album-cover-design.jpg') } div.cover:nth-child (5) {background-image: url ('covers/Pink-Floyd-Dark-Side-of-the-Moon-album-covers-billboard-1000x1000.jpg');} div.cover:nth-child (6) {background-image: url (' covers/sonic-quiver-time-and-space1-1000x1000.jpg') } div.cover:nth-child (7) {background-image: url ('covers/tumblr_inline_nydppi1Mp91t7tdyh_500.jpg');} background-color [required =' required'] {background-color: # 000 } 222 (function (parent) {var cards = parent.querySelectorAll ('div'), coverCount = cards.length, middleIndex = (coverCount-1) / 2, middleCover = cards [middleIndex], parentWidth = parent.querySelectorAll [XSS _ clean] .clientWidth, currentIndex = middleIndex; var maxRotate = 42, stepper = maxRotate/middleIndex, maxZIndex = middleIndex + 1 Var rotateReg = / rotateY\ ((\ -?\ d {1 3}\.?\ d *) deg\) /, translateReg = / translateX\ ((\ -?\ d {1pr 3}\.?\ d *) px\) /; / debugger; for (var I = 0; I
