Home > Developer > Web Develop
CSS3 allows us to jump out of the 2d space to achieve the animation effect of 3-dimensional space, here is an auto-flip of the 3d dice animation effect of the production process.
The first step, the layout of the HTML first, for the 3D effect, layout has a certain pattern, the code is as follows:
<body><div id= "outer" > <div id= "group" > <div class= "page" id= "Page1" >.</div> <div class= "page" id= "Page2" ... </div> <div class= "page" id= "Page3" >...</div> <div class= "page" id= "Page4"; </div> <div class= "page" id= "Page5" >.....</div> <div class= "page" id= "Page6" > ......</div> </div></div></body>
Define a div called outer in the body, which is the outermost div to provide a 3D scene that can be thought of as a display platform for 3D graphics, only to define such a div, to be able to display 3D graphics, and also to define a div of class group. The six planes used to put the dice together. Finally, we define 6 parallel Div, representing the six planes of the dice.
The second step, define the three-dimensional scene CSS, the code is as follows:
#outer {/ * define sight distance */ -webkit-perspective:500px; -webkit-perspective-origin:50% 50%; -moz-perspective:500px; -moz-perspective-origin:50% 50%; Overflow:hidden; }The perspective here means that through this three-dimensional scene to see the three-dimensional effect of the distance, the greater the value to see the effect of the farther, the smaller the value, the closer you see the effect. Perspective-origin indicates which angle is relative to the browser to observe the three-dimensional graphics, the first parameter represents the x-axis direction, the second parameter represents the y-axis direction, you can use the unit value PX, you can use the percentage. To achieve the purpose of compatibility with FF and chrome, add the Moz and WebKit prefixes to the corresponding CSS names. Here it is necessary to say the coordinate definition in CSS3, as follows:
In CSS3, the x-axis is in the positive direction to the right, the y-axis is in the positive direction, and the z-axis is extending from the screen to the screen, which differs from the coordinate system definition in stereo geometry.
The third step is to set the CSS property for the DIV with ID group, which is mainly composed of 6 planes of the dice, which is easy to define the whole animation effect, the code is as follows:
#group { width:200px; height:200px; position:relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin:200px Auto; }This defines the width of the div and defines its position as relative, which allows the six flat faces to be absolutely positioned for the Div, while transform-style:preserve-3d this property tells the browser All transform transformations are transformations in 3D space, not in 2D space, but also with prefixes for compatibility.
The fourth step is to define the common page property of each planar Div, which is the CSS property common to each dice plane, with the following code:
. page{ width:200px; height:200px; Position:absolute; border-radius:20px; Text-align:center; Font-weight:bold; opacity:0.5; Overflow:hidden; Filter:alpha (opacity=50); font-size:150px; Word-break:break-all; Word-wrap:break-word; }Here defines the width of each plane and its parent Div group, the same width, absolute positioning, (only absolute positioning, let it out of the document flow, can apply Transform3D transform effect, otherwise only in 2D space transformation), need to explain is word-break: Break-all;word-wrap:break-word; These two sentences
Fifth step, define the CSS properties of each plane's Div
First plane:
#page1 {background-color: #10a6ce; line-height:100px;}In order to differentiate each plane, the 3D effect is displayed, where the adjacent div is set to a different background color, the first div is in the XY plane by default and does not transform
A second plane:
#page2 { background-color: #0073b3; -webkit-transform-origin:right; -webkit-transform:rotatey ( -90deg); -moz-transform-origin:right; -moz-transform:rotatey ( -90deg); line-height:100px; }Here the Transform-origin is used to define which side of the plane to start the transformation, the right edge of the y-axis around-90 degrees, also for compatibility with the prefix
A third plane:
#page3 { background-color: #07beea; -webkit-transform-origin:left; -webkit-transform:rotatey (90deg); -moz-transform-origin:left; -moz-transform:rotatey (90deg); line-height:80px; }A third plane:
#page4 { background-color: #29B4F0; -webkit-transform-origin:top; -webkit-transform:rotatex ( -90deg); -moz-transform-origin:top; -moz-transform:rotatex ( -90deg); line-height:80px; }Fifth plane:
#page5 {background-color: #6699cc;-webkit-transform-origin:bottom;-webkit-transform:rotatex (90deg);- Moz-transform-origin:bottom;-moz-transform:rotatex (90deg); line-height:50px;}Sixth plane:
#page6 {background-color: #10a6ce;-webkit-transform:translatez ( -200px);-moz-transform:translatez ( -200px); line-height:50px;}This sixth plane needs to be shifted along the z-axis with its wide and high length, reaching the goal of connecting other planes
The sixth step, define the Keyframe animation, the code is as follows:
@-moz-keyframes Scroll { 0% { -moz-transform:rotatey (0deg) Rotatex (0deg); } 50% { -moz-transform:rotatey (360deg) Rotatex (0deg); } 100% { -moz-transform:rotatey (360deg) Rotatex (360deg); } } @-webkit-keyframes Scroll { 0% { -webkit-transform:rotatey (0deg) Rotatex (0deg); } 50% { -webkit-transform:rotatey (360deg) Rotatex (0deg); } 100% { -webkit-transform:rotatey (360deg) Rotatex (360deg); } }Here the animation is divided into two stages, from 0% to 50%, the dice along the y-axis of 360 degrees, from 50% to 100% of the time, along the x-axis and then 360 degrees of rotation, so as to complete an animation effect, the same for compatibility, the keyframe keyframes preceded by a prefix
The seventh step is to use CSS to invoke the Keyframe animation defined earlier in the DIV with ID group, where you need to call the animation on the parent div of the six planes because the colour six planes are simultaneously transformed.
#group { width:200px; height:200px; position:relative; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; margin:200px Auto; -webkit-animation:scroll 8s linear 0s infinite; -moz-animation:scroll 8s linear 0s infinite; }The result of the third step is added animation:scroll 8s linear 0s infinite; CSS Property, which represents a call to an animation named scroll, once the animation is completed at 8s, the speed of the animation transformation is uniform, immediately start to perform animation and endless animation effect of the loop.
Final Demo
CSS3 realizes the dice auto-flip effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
