How to use css3 to realize 3D rotation Animation Special effects
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.
