3D image rotation with pure CSS

The CSS show continues today. Today, we are going to see a pure css 3D image rotation effect. Please study the effect first, or download the favorite first.

First, let's look at the html file, where div. billboard is the effect container. We use 10 div. poster to separate the image. Each poster has three faces, which are used to hold three images respectively.

<div class="billboard">    <div class="poster">        <div class="face panel1 p1"></div>        <div class="face panel2 p1"></div>        <div class="face panel3 p1"></div>    </div>    <div class="poster">        <div class="face panel1 p2"></div>        <div class="face panel2 p2"></div>        <div class="face panel3 p2"></div>    </div>    <div class="poster">        <div class="face panel1 p3"></div>        <div class="face panel2 p3"></div>        <div class="face panel3 p3"></div>    </div>    <div class="poster">        <div class="face panel1 p4"></div>        <div class="face panel2 p4"></div>        <div class="face panel3 p4"></div>    </div>    <div class="poster">        <div class="face panel1 p5"></div>        <div class="face panel2 p5"></div>        <div class="face panel3 p5"></div>    </div>    <div class="poster">        <div class="face panel1 p6"></div>        <div class="face panel2 p6"></div>        <div class="face panel3 p6"></div>    </div>    <div class="poster">        <div class="face panel1 p7"></div>        <div class="face panel2 p7"></div>        <div class="face panel3 p7"></div>    </div>    <div class="poster">        <div class="face panel1 p8"></div>        <div class="face panel2 p8"></div>        <div class="face panel3 p8"></div>    </div>    <div class="poster">        <div class="face panel1 p9"></div>        <div class="face panel2 p9"></div>        <div class="face panel3 p9"></div>    </div>    <div class="poster">        <div class="face panel1 p10"></div>        <div class="face panel2 p10"></div>        <div class="face panel3 p10"></div>    </div></div>

In the CSS file, we use sass and scss syntax.

// Variable initialization // Number of image parts. If you want to change the number of image parts, you need to modify the html file accordingly. $ numPoster: 10; // The number of Rotated Images. If you want to change the number of images, html needs to be modified accordingly $ numFace: 3; // Image width $ width: 600px; // Image height $ height: 320px; // box settings. billboard {width: $ width; margin: 100px auto;} // left floating of the image bar. poster {float: left; width: $ width/$ numPoster; height: $ height;} // unified settings of image entries, absolute positioning and 3d animation settings. face {position: absolute; height: $ height; width: $ width/$ numPoster; transform-origin: 50% 50%-17px; backface-visibility: hidden; transform-style: preserve-3d; perspective: 350px;} // set the background image and animation @ for $ I from 1 through $ numFace {. poster. panel # {$ I} {background: url (http://gx.zptc.cn/whqet/img/?# I =.jpg); transform: transformY (360deg/$ numFace * ($ I-1); animation: rotateMe # {$ I} 10 s infinite;} @ keyframes rotateMe # {$ I} {0% {transform: rotateY (360deg/$ numFace * ($ I-1 ));} 9% {transform: rotateY (360deg/$ numFace * ($ I-1);} 24% {transform: rotateY (360deg/$ numFace * ($ I ));} 42% {transform: rotateY (360deg/$ numFace * ($ I);} 57% {transform: rotateY (360deg/$ numFace * ($ I + 1 ));} 75% {transform: rotateY (360deg/$ numFace * ($ I + 1);} 90% {transform: rotateY (360deg/$ numFace * ($ I + 2 ));} 100% {transform: rotateY (360deg/$ numFace * ($ I + 2) ;}}// background offset of image entries @ for $ I from 1 through $ numPoster {. poster. p # {$ I} {background-position:-($ width/$ numPoster * ($ I-1) top ;}}

Using sass can make the code structure clear and logical. Please study and improve it!

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------