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

This article mainly explains "css3 how 3D dice flip special effects", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "css3 how 3D dice flip special effects" bar!

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

Copy the code

The code is as follows:

.

..

...

....

.

.

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:

Copy the code

The code is as follows:

# 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 coordinate definition in css3, as follows:

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:

Copy the code

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 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:

Copy the code

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 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:

Copy the code

The code is as follows:

# 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:

Copy the code

The code is as follows:

# page2 {

Background-color: # 0073b3

-webkit-transform-origin:right

-webkit-transform:rotateY (- 90deg)

-moz-transform-origin:right

-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:

Copy the code

The code is as follows:

# page3 {

Background-color: # 07beea

-webkit-transform-origin:left

-webkit-transform:rotateY (90deg)

-moz-transform-origin:left

-moz-transform:rotateY (90deg)

Line-height: 80px

}

The third plane:

Copy the code

The code is as follows:

# 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:

Copy the code

The code is as follows:

# 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:

Copy the code

The code is as follows:

# page6 {

Background-color: # 10a6ce

-webkit-transform:translateZ (- 200px)

-moz-transform:translateZ (- 200px)

Line-height: 50px

}

This sixth plane needs to translate its width, height and length along the Z axis, which has achieved the purpose of connecting other planes.

Step 6, define the Keyframe animation, the code is as follows:

Copy the code

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%, 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 invoke the previously defined Keyframe animation using CSS in the div where id is group. Here, because the six planes of the chromophores need to change at the same time, the animation needs to be called on the parent div of the six planes.

Copy the code

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

-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.

Thank you for your reading, the above is the content of "how css3 3D dice flip special effects". After the study of this article, I believe you have a deeper understanding of the problem of how css3 3D dice flip special effects, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.