Home > Article > Web Front-end > css3 revolving door effect_html/css_WEB-ITnose
css3 revolving door effect_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:51:381970browse
Pure CSS3 implements a regular hexagonal revolving door effect. Record the learning situation of CSS3 animation. The effect is as follows:
Mainly used CSS3 technology There are: keyframes, perspective, perspective-origin, transform (translate, rotate), animation, transform-origin, plus a little knowledge of plane geometry (calculating spacing, angles, etc.), the detailed process is as follows:
First design Let’s look at the layout to be displayed (top view). The vertical lines along the way are auxiliary lines, which are needed when calculating the offset:
The red frame is the rotating surface (that is, the final structure of the revolving lantern effect) Rotated with the midpoint of the surface as the axis of rotation), the six surfaces are also laid out based on this surface. First look at the three surfaces under the red box. The surface on the left is originally at the blue line and is reached through rotation. At the green line, the same applies to the right side. The middle surface only needs to be moved in the Z-axis direction by a distance of three side lengths of one-half root. All surfaces are offset and rotated to achieve the structure in the above figure. Please note that What is important is to ensure that the surface with the pattern (text is used in this example, the idea is the same) should be outwards, such as the middle surface above, after the Z-axis is offset outward by a distance of three side lengths of one-half root. Rotate 180° with the midpoint as the center of the circle, and all surfaces can be easily obtained in the same way. One technique that needs to be kept in mind during this process is: in the three-dimensional coordinate system, starting from the coordinate origin and looking in the positive direction of the coordinate axis, the value of rotate(X/Y/Z) is a positive number when rotating counterclockwise. When rotating, the rotate(X/Y/Z) value is negative.
Set up the structure: a 3D scene, a rotating surface of the revolving lantern and six sides of the revolving lantern:
<div class="wapper"> <!--场景--> <div class="rotate"> <!--容器--> <div class="item itemOne">1</div> <!--六个面--> <div class="item itemTwo">2</div> <div class="item itemThree">3</div> <div class="item itemFour">4</div> <div class="item itemFive">5</div> <div class="item itemSix">6</div> </div> </div>
Set up the 3D scene:
.wapper{ -webkit-perspective:800; /*观察距离800*/ -webkit-perspective-origin:50% -100%; /*从正前方上方斜向下观察*/ width:400px; height:300px; margin:100px auto;} Set the rotation surface:
@-webkit-keyframes rotation{ /*动画过程*/ 0%{-webkit-transform:rotateY(0deg);} 100%{-webkit-transform:rotateY(-360deg);}}.rotate{ -webkit-transform-style:preserve-3d; /*3D变换*/ -webkit-animation: rotation 6s infinite; /*动画名称、时间、循环动画*/ -webkit-animation-timing-function: linear; /*匀速动画*/ -webkit-transform-origin:center; /*沿中间旋转*/ width:100%; height:100%; position:relative; /*相对定位布局*/} Set the general style of the six surfaces except position:
.item{ -webkit-transform-origin:center; /*均沿中心旋转*/ width:198px; height:300px; position:absolute; /*绝对定位在旋转面上*/ background:none; text-align:center; line-height:300px;} Set the positions of the six faces respectively. Taking No. 1 as an example (the face marked with the green line on the left under the red box in the structure diagram above), all values need to be calculated through geometry:
.itemOne{ left:-50px; -webkit-transform:translateZ(87px) rotateY(-60deg); /*z轴向外移动87px，沿Y轴方向旋转-60°*/ background:#f00;} The animation stops when the mouse hovers over the structure:
.rotate:hover{ -webkit-animation-play-state:paused; /*设置动画状态*/} This example can only be viewed in a webkit-based browser Effect, if you want to be compatible with other modern browsers, you need to add -moz- and other prefixes. The complete code is as follows:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Animation Test</title> <style> *{margin:0;padding:0;} @-webkit-keyframes rotation{ 0%{-webkit-transform:rotateY(0deg);} 100%{-webkit-transform:rotateY(-360deg);} } .wapper{ -webkit-perspective:800; -webkit-perspective-origin:50% -100%; width:400px; height:300px; margin:100px auto; } .rotate{ -webkit-transform-style:preserve-3d; -webkit-animation: rotation 6s infinite; -webkit-animation-timing-function: linear; -webkit-transform-origin:center; width:100%; height:100%; position:relative; } .item{ -webkit-transform-origin:center; width:198px; height:300px; position:absolute; background:none; text-align:center; line-height:300px; } .itemOne{ left:-50px; -webkit-transform:translateZ(87px) rotateY(-60deg); background:#f00; } .itemTwo{ left:100px; -webkit-transform:translateZ(173px); background:#ff0; } .itemThree{ left:250px; -webkit-transform:translateZ(87px) rotateY(60deg); background:#0ff; } .itemFour{ left:250px; -webkit-transform:translateZ(-87px) rotateY(120deg); background:#0f0; } .itemFive{ left:100px; -webkit-transform:translateZ(-173px) rotateY(180deg); background:#0ff; } .itemSix{ left:-50px; -webkit-transform:translateZ(-87px) rotateY(-120deg); background:#00f; } .rotate:hover{ -webkit-animation-play-state:paused; } </style></head><body> <div class="wapper"> <div class="rotate"> <div class="item itemOne">1</div> <div class="item itemTwo">2</div> <div class="item itemThree">3</div> <div class="item itemFour">4</div> <div class="item itemFive">5</div> <div class="item itemSix">6</div> </div> </div></body></html>