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

This article will explain in detail how to use css3 to achieve 3D rotation animation special effects. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The code is as follows:

Css3 3D animation keyframes

/ * ANIMATIONS * /

@-webkit-keyframes spin {

From {- webkit-transform: rotateY (0);}

To {- webkit-transform: rotateY (360deg);}

}

@-ms-keyframes spin {

From {ms-transform: rotateY (0);}

To {ms-transform: rotateY (360deg);}

}

@ keyframes spin {

From {transform: rotateY (0);}

To {transform: rotateY (360deg);}

}

@-webkit-keyframes spin-vertical {

From {- webkit-transform: rotateX (0);}

To {- webkit-transform: rotateX (- 360deg);}

}

@-ms-keyframes spin-vertical {

From {ms-transform: rotateX (0);}

To {ms-transform: rotateX (- 360deg);}

}

@ keyframes spin-vertical {

From {transform: rotateX (0);}

To {transform: rotateX (- 360deg);}

}

/ * STANDARD CUBE * /

. cube-wrap {

-webkit-perspective: 800px

-webkit-perspective-origin: 50% 100px

-moz-perspective: 800px

-moz-perspective-origin: 50% 100px

-ms-perspective: 800px

-ms-perspective-origin: 50% 100px

Perspective: 800px

Perspective-origin: 50% 100px

}

.cube {

Position: relative

Width: 200px

Margin: 0 auto

-webkit-transform-style: preserve-3d

-webkit-animation: spin 5s infinite linear

-moz-transform-style: preserve-3d

-moz-animation: spin 5s infinite linear

-ms-transform-style: preserve-3d

-ms-animation: spin 5s infinite linear

Transform-style: preserve-3d

Animation: spin 5s infinite linear

}

.cube div {

Position: absolute

Width: 200px

Height: 200px

Background: rgba (255, 255, 255, 0.1)

Box-shadow: inset 0 0 30px rgba (125 minus 125 mine125)

Font-size: 20px

Text-align: center

Line-height: 200px

Color: rgba (0. 0. 0. 5)

Font-family: sans-serif

Text-transform: uppercase

}

/ * DEPTH CUBE * /

.depth div.back-pane {

-webkit-transform: translateZ (- 100px) rotateY (180deg)

-moz-transform: translateZ (- 100px) rotateY (180deg)

-ms-transform: translateZ (- 100px) rotateY (180deg)

Transform: translateZ (- 100px) rotateY (180deg)

}

.depth div.right-pane {

-webkit-transform:rotateY (- 270deg) translateX (100px)

-webkit-transform-origin: top right

-moz-transform:rotateY (- 270deg) translateX (100px)

-moz-transform-origin: top right

-ms-transform:rotateY (- 270deg) translateX (100px)

-ms-transform-origin: top right

Transform:rotateY (- 270deg) translateX (100px)

Transform-origin: top right

}

.depth div.left-pane {

-webkit-transform:rotateY (270deg) translateX (- 100px)

-webkit-transform-origin: center left

-moz-transform:rotateY (270deg) translateX (- 100px)

-moz-transform-origin: center left

-ms-transform:rotateY (270deg) translateX (- 100px)

-ms-transform-origin: center left

Transform:rotateY (270deg) translateX (- 100px)

Transform-origin: center left

}

.depth div.top-pane {

-webkit-transform:rotateX (- 90deg) translateY (- 100px)

-webkit-transform-origin: top center

-moz-transform:rotateX (- 90deg) translateY (- 100px)

-moz-transform-origin: top center

-ms-transform:rotateX (- 90deg) translateY (- 100px)

-ms-transform-origin: top center

Transform:rotateX (- 90deg) translateY (- 100px)

Transform-origin: top center

}

.depth div.bottom-pane {

-webkit-transform:rotateX (90deg) translateY (100px)

-webkit-transform-origin: bottom center

-moz-transform:rotateX (90deg) translateY (100px)

-moz-transform-origin: bottom center

-ms-transform:rotateX (90deg) translateY (100px)

-ms-transform-origin: bottom center

Transform:rotateX (90deg) translateY (100px)

Transform-origin: bottom center

}

.depth div.front-pane {

-webkit-transform: translateZ (100px)

-moz-transform: translateZ (100px)

-ms-transform: translateZ (100px)

Transform: translateZ (100px)

}

/ * VERTICAL SPINNING CUBE * /

. cube-wrap.vertical .cube {

-webkit-transform-origin: 0 100px

-moz-transform-origin: 0 100px

-ms-transform-origin: 0 100px

Transform-origin: 0 100px

-webkit-animation: spin-vertical 5s infinite linear

-moz-animation: spin-vertical 5s infinite linear

-ms-animation: spin-vertical 5s infinite linear

Animation: spin-vertical 5s infinite linear

}

. cube-wrap.vertical .depth div.top-pane {

-webkit-transform:rotateX (- 270deg) translateY (- 100px)

-moz-transform:rotateX (- 270deg) translateY (- 100px)

-ms-transform:rotateX (- 270deg) translateY (- 100px)

Transform:rotateX (- 270deg) translateY (- 100px)

}

. cube-wrap.vertical .depth div.back-pane {

-webkit-transform: translateZ (- 100px) rotateX (180deg)

-moz-transform: translateZ (- 100px) rotateX (180deg)

-ms-transform: translateZ (- 100px) rotateX (180deg)

Transform: translateZ (- 100px) rotateX (180deg)

}

. cube-wrap.vertical .depth div.bottom-pane {

-webkit-transform: rotateX (- 90deg) translateY (100px)

-moz-transform: rotateX (- 90deg) translateY (100px)

-ms-transform: rotateX (- 90deg) translateY (100px)

Transform: rotateX (- 90deg) translateY (100px)

}

/ * FLAT SPINNING CUBE * /

. cube-wrap.flat {

-webkit-perspective: none

-webkit-perspective-origin: 0 0

-moz-perspective: none

-moz-perspective-origin: 0 0

-ms-perspective: none

-ms-perspective-origin: 0 0

Perspective: none

Perspective-origin: 0 0

}

Front

After

Go up

Bottom

Left

Right

Front

After

Go up

Bottom

Left

Right

Front

After

Go up

Bottom

Left

Right

This is the end of this article on "how to use css3 to achieve 3D rotation animation special effects". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.