Home >Web Front-end >HTML Tutorial >A scattered 3D flip effect based on css3_html/css_WEB-ITnose
A scattered 3D flip effect based on css3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:541129browse
CSS3 enables us to jump out of the 2D space and achieve animation effects in the 3D space. Here is an automatic flipping 3D dice animation effect production process.
The first step is to lay out the HTML. For 3D effects, the layout has certain rules. 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. It is the outermost div and is used to provide a 3D scene. It can be considered as a display platform for 3D graphics. Only by defining such a div can 3D graphics be displayed. In addition Define a div with class group to hold the six planes of the dice and group them together. Finally, define 6 parallel divs to represent the six planes of the die.
The second step is to define the css of the three-dimensional scene. The code is as follows:
#outer{ /*定义视距*/ -webkit-perspective:500px; -WebKit-perspective-origin: 50% 50%; -moz-perspective:500px; -moz-perspective-origin: 50% 50%; overflow: hidden; } The perspective here means seeing the three-dimensional inside through this three-dimensional scene. The distance of the effect, the larger the value, the farther the effect is seen, the smaller the value, the closer the effect is seen. Perspective-origin represents the angle from which the three-dimensional graphics are viewed relative to the browser. The first parameter represents the X-axis direction, and the second parameter represents the Y-axis direction. The unit value px or percentage can be used. In order to achieve compatibility with ff and chrome, moz and WebKit prefixes are added to the corresponding CSS names. It is necessary to talk about the coordinate definition in CSS3 here, as follows:
In CSS3, the positive direction of the X-axis is to the right, the positive direction of the Y-axis is downward, and the positive direction of the Z-axis is from the inside of the screen Stretching out of the screen is different from the coordinate system definition in solid geometry.
The third step is to set the css attributes for the div with the id of group. This div mainly combines the 6 planes of the dice to facilitate the definition of the overall 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; } The width and height of the div are defined here, and its position is defined as relative, so that the six planes in it can be absolutely positioned relative to this div. At the same time, the attribute transform-style:preserve-3d tells Browser, all transform transformations are transformations in 3D space, not in 2D space, and are also prefixed for compatibility.
The fourth step is to define the common page attribute of each plane div, that is, the common CSS attribute of each dice sub-plane. The code is as follows:
.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 It is defined that the width and height of each plane are the same as the width and height of its parent div group, and absolute positioning is performed. (Only when it is absolutely positioned and separated from the document flow can the transform3D transformation effect be applied, otherwise it can only be transformed in 2D space). What needs to be explained is the two sentences word-break:break-all;word-wrap:break-word;
The fifth step is to define the CSS properties of each plane div
The first step planes:
#page1{background-color: #10a6ce;line-height: 100px;}
In order to distinguish each plane and show the 3D effect, you need to Set different background colors for adjacent divs. The first div defaults to the XY plane without transformation
The 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; } is used here transform-origin defines which side of the plane to start transforming. Here, the rightmost side is used to go around -90 degrees along the Y-axis. The prefix
is also added for compatibility. The 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; } 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;} The sixth plane:
#page6{background-color: #10a6ce;-webkit-transform:translateZ(-200px);-moz-transform:translateZ(-200px);line-height: 50px;} This sixth plane needs to translate its width and height along the Z axis to achieve the purpose of connecting other planes
The sixth step is to 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); } } The animation here is divided into two stages, from 0% to 50%. Rotate 360 degrees along the Y axis, and then rotate 360 degrees along the X axis from 50% to 100% to complete an animation effect. Also for compatibility, the prefix
is added to the keyframes.The seventh step is to use CSS to call the previously defined keyframe animation in the div with the id of group. Since the six planes of the color change need to be transformed at the same time, the animation needs to be called on the parent div of the six planes
#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 animation:scroll 8s linear 0s infinite; CSS attribute is added to the result of the third step, indicating that the animation named scroll is called. The completion time of an animation is 8s. The animation The speed of transformation is constant, and the animation starts immediately and loops with infinite animation effects.
Online preview Source code download