3D image rotation with pure CSS

Source: Internet
Author: User

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.
---------------------------------------------------------------

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.