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

This article mainly introduces "css3 how to achieve mahjong sieve 3D flip special effects". In daily operation, I believe many people have doubts about how to achieve mahjong sieve 3D flip special effects in css3. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer "how css3 realizes mahjong sieve 3D flip special effects". Next, please follow the editor to study!

The first step is to lay out the HTML. For 3D effects, the layout has certain rules. The code is as follows:

XML/HTML Code copies content to the clipboard

.

..

...

....

.

.

In body, define a div called outer, which is the outermost div, used to provide a 3D scene, can be thought of as a 3D graphics display platform, only when such a div is defined, can 3D graphics be displayed. In addition, a div with class as group is defined to hold the six planes of dice and combine them together. Finally, six parallel div are defined to represent the six planes of the dice.

The second step is to define the css of the 3D scene. The code is as follows:

CSS Code copies content to the clipboard

# outer {

/ * define sight distance * /

-webkit-perspective:500px

-WebKit-perspective-origin: 50%

-moz-perspective:500px

-moz-perspective-origin: 50%

Overflow: hidden

}

The perspective here represents the distance to see the 3D effect through this 3D scene. The higher the value, the farther the effect is, and the smaller the value is, the closer the effect is. Perspective-origin represents the angle relative to the browser to view the 3D graphics, the first parameter represents the X axis direction, the second parameter represents the Y axis direction, you can use the unit value px, or you can use a percentage. To achieve compatibility between ff and chrome, prefix the corresponding CSS name with moz and WebKit. It is necessary to talk about the definition of coordinates in css3.

In css3, the X axis positive direction is to the right, the Y axis positive direction is downward, and the Z axis positive direction extends from inside the screen to outside the screen, which is different from the definition of coordinate system in solid geometry.

The third step is to set the css attribute for id and the div of group. This div mainly combines the six planes of dice together to easily define the overall animation effect. The code is as follows:

C # Code copies content to the clipboard

# 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 is defined here, and its position is defined as relative, so that the six planes can be positioned absolutely relative to the div. At the same time, the attribute transform-style:preserve-3d tells the browser that all transform transformations are transformed in 3D space, not in 2D space, and are also prefixed for compatibility.

The fourth step is to define the common page property of each plane div, that is, the common CSS property of each color plane, as follows:

CSS Code copies content to the clipboard

.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 is the same as the width and height of its parent div group. (only when the plane is absolutely positioned and detached from the document stream can the transform3D transformation effect be applied, otherwise it can only be transformed in 2D space. What needs to be explained is the sentence word-break:break-all;word-wrap:break-word;.

The fifth step is to define the CSS property of div for each plane

First plane:

CSS Code copies content to the clipboard

# page1 {

Background-color: # 10a6ce

Line-height: 100px

}

In order to distinguish each plane and show the 3D effect, it is necessary to set different background colors for the adjacent div. The first div is located in the XY plane by default and does not change.

Second plane:

CSS Code copies content to the clipboard

# page2 {

Background-color: # 0073b3

-webkit-transform-origin:rightright

-webkit-transform:rotateY (- 90deg)

-moz-transform-origin:rightright

-moz-transform:rotateY (- 90deg)

Line-height: 100px

}

Transform-origin is used here to define the edge on which the plane begins to transform, with the rightmost edge around the Y axis of-90 degrees, also prefixed for compatibility

The third plane:

C # Code copies content to the clipboard

# page3 {

Background-color: # 07beea

-webkit-transform-origin:left

-webkit-transform:rotateY (90deg)

-moz-transform-origin:left

-moz-transform:rotateY (90deg)

Line-height: 80px

}

The fourth plane:

CSS Code copies content to the clipboard

# page4 {

Background-color: # 29B4F0

-webkit-transform-origin:top

-webkit-transform:rotateX (- 90deg)

-moz-transform-origin:top

-moz-transform:rotateX (- 90deg)

Line-height: 80px

}

The fifth plane:

CSS Code copies content to the clipboard

# page5 {

Background-color: # 6699cc

-webkit-transform-origin:bottombottom

-webkit-transform:rotateX (90deg)

-moz-transform-origin:bottombottom

-moz-transform:rotateX (90deg)

Line-height: 50px

}

The sixth plane:

CSS Code copies content to the clipboard

# 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, which has achieved the goal of connecting other planes. Step 6, define the Keyframe animation, the code is as follows:

CSS Code copies content to the clipboard

@-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%, the dice rotates 360 degrees along the Y axis, and then 360 degrees along the X axis in the time from 50% to 100%. This completes the animation effect once, and for the sake of compatibility, a prefix is added to the Keyframe keyframes

The seventh step is to use CSS to invoke the previously defined Keyframe animation in the div where id is group. Here, the animation needs to be called on the parent div of the six planes because the six planes need to change at the same time.

CSS Code copies content to the clipboard

# 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, which means that the animation named scroll is called. The completion time of an animation is 8s, and the speed of the animation transformation is uniform. Immediately start the execution of the animation and cycle of infinite animation effects.

At this point, the study on "how to achieve mahjong sieve 3D flip special effects by css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.