Home > Developer > JavaScript
Css3 drive light effect, css3 drive light
The pure css3 achieves a positive hexagonal lighting effect, recording the learning situation of css3 animation. The effect is as follows:
The main css3 technologies used are: keyframes, perspective, perspective-origin, transform (translate, rotate), animation, transform-origin, in addition, the detailed process is as follows:
First, design the layout (top view) to be displayed. The vertical line on the way is the Auxiliary Line, which is used to calculate the offset:
The red frame is the rotating surface (that is, the structure of the result of the lawn lamp finally rotates with the center of the plane as the rotating axis), and the six sides are also based on the layout of the plane, first, let's look at the three faces under the red box. The left side is originally at the Blue Line and is rotated to the green line. The right side is the same, the middle plane only needs to move the distance between the two ends and the three sides in the Z axis. All the planes are structured by offset and rotation, it should be noted that the pattern surface (in this example, the text is used, and the idea is consistent) should be outward, such as the middle area above, after the distance from the three sides of the root of the two points is shifted outward on the Z axis, the center is rotated 180 ° with the midpoint as the center. One technique that needs to be kept in mind in this process is: in the three-dimensional coordinate system, starting from the coordinate origin, looking toward the positive direction of the coordinate axis, rotate (X/Y/Z) when rotating counterclockwise) the value is a positive number. When rotating clockwise, the value of rotate (X/Y/Z) is a negative number.
Configuration Structure: a 3D scene, a rotating surface of a lawn lamp, and six surfaces of a lawn lamp:
<Div class = "wapper"> <! -- Scenario --> <div class = "rotate"> <! -- Container --> <div class = "item itemOne"> 1 </div> <! -- Six faces --> <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>
Set 3D scenarios:
. Wapper {-webkit-perspective: 800;/* observed distance: 800 */-webkit-perspective-origin: 50%-100%;/* observed diagonally down from the top of the front */width: 400px; height: 300px; margin: 100px auto ;}
Set the Rotation Surface:
@-Webkit-keyframes rotation {/* animation process */0% {-webkit-transform: rotateY (0deg);} 100% {-webkit-transform: rotateY (-360deg );}}. rotate {-webkit-transform-style: preserve-3d;/* 3D transform */-webkit-animation: rotation 6 s infinite; /* animation name, time, cyclic animation */-webkit-animation-timing-function: linear;/* uniform animation */-webkit-transform-origin: center; /* rotate along the center */width: 100%; height: 100%; position: relative;/* relative positioning Layout */}
Set the general style except the position of the six faces:
. Item {-webkit-transform-origin: center;/* All rotate along the center */width: 198px; height: 300px; position: absolute; /* absolutely positioned on the rotating surface */background: none; text-align: center; line-height: 300px ;}
Set the positions of the six sides respectively. Take "1" as an example (the area marked by the Green Line on the left of the red box in the preceding structure). All the values must be obtained through geometric calculation:
. ItemOne {left:-50px;-webkit-transform: translateZ (87px) rotateY (-60deg);/* Move 87px outward on the Z axis and rotate-60 ° */background along the Y axis: # f00 ;}
When the mouse is hovering over the structure, the animation stops:
. Rotate: hover {-webkit-animation-play-state: paused;/* set the animation status */}
In this example, you can only view the effect in the webkit kernel browser. To be compatible with other modern browsers, you need to add prefix-moz-and so on. The complete code is as follows:
<!DOCTYPE html>
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
