Shulou(Shulou.com)06/01 Report--

Editor to share with you how to achieve pure css3 walking lantern effect, I believe that most people do not know much, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

The main css3 technologies used are: keyframes, perspective, perspective-origin, transform (translate, rotate), animation, transform-origin, plus a little knowledge of plane geometry (calculating spacing, angle, etc.). The detailed process is as follows:

First of all, design the layout to be displayed (top view). The vertical line on the way is the auxiliary line, which is needed to calculate the offset:

The red frame is a rotating face (that is, the structure of the walking lantern effect finally rotates with the midpoint of the face as the axis of rotation). The layout of the six faces is also based on this face. first look at the three faces under the red box, the left face was originally at the blue line, through rotation to the green line, the right side is the same, the middle face only needs to move two-thirds of the root sign three sides in the Z axis. All the faces are offset and rotated to achieve the structure of the above picture, it is necessary to pay attention to ensuring that the patterned face (in this case, the text is used, the idea is the same) to the outward, such as the upper middle of the face, in the Z axis outward offset two-thirds of the root sign three sides of the distance, but also to the midpoint as the center of the rotation 180 °, all the faces are equally easy to get. One technique to keep in mind in this process is that in the three-dimensional coordinate system, starting from the coordinate origin and looking toward the positive direction of the coordinate axis, the value of rotate (X/Y/Z) is positive when rotating counterclockwise, and the value of rotate (X/Y/Z) is negative when rotating clockwise.

Set the structure: a 3D scene, a revolving face of a walking lantern, and six faces of a walking lantern:

one

two

three

four

five

six

Set up the 3D scene:

.wapper {

-webkit-perspective:800; / * observation distance 800 miles /

-webkit-perspective-origin:50%-100%; / * oblique downward view from directly in front * /

Width:400px

Height:300px

Margin:100px auto

}

Set the rotation face:

@-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 6s infinite; / * Animation name, time, cycle Animation * /

-webkit-animation-timing-function: linear; / * uniform animation * /

-webkit-transform-origin:center; / * rotate along the middle * /

Width:100%

Height:100%

Position:relative; / * relative positioning layout * /

}

Set up a common style for the six faces except the location:

.item {

-webkit-transform-origin:center; / * both rotate along the center * /

Width:198px

Height:300px

Position:absolute; / * is absolutely positioned on the surface of rotation * /

Background:none

Text-align:center

Line-height:300px

}

Set the positions of six faces respectively. Take No. 1 as an example (the face marked by the green line on the left under the red box in the structure diagram above), all the values need to be geometrically calculated:

.itemOne {

Left:-50px

-webkit-transform:translateZ (87px) rotateY (- 60deg); / * move the 87px outward on the z axis and rotate-60 °* / along the Y axis

Background:#f00

}

The animation stops when the mouse hovers over the structure:

.rotate: hover {

-webkit-animation-play-state:paused; / * set animation status * /

}

This example can only be viewed in browsers with webkit kernel. To be compatible with other modern browsers, you need to add prefixes such as-moz-. The complete code is as follows:

Animation Test

* {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

}

one

two

three

four

five

six

These are all the contents of this article entitled "how to achieve Walking Horse Lantern effect in Pure css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.