CSS3 animation effects: 3 3D Animations

Cube Rotation animation effect

Css

1 #container{2 width:400px;3 Height:400px;4 -webkit-perspective: -;5 Perspective: -;6 -webkit-perspective-origin:50% 225px;7 Perspective-origin:50% 225px;8 9}Ten #stage{ One width:300px; A Height:300px; -  - -webkit-transition:-webkit-transform 2s; the transition:transform 2s; - -webkit-transform-style:preserve-3d; - Transform-style:preserve-3d; -  +} - #shape{ + width:200px; A Height:200px; at position:relative; - Top:100px; - margin:0 Auto; - Transform-style:preserve-3d; -} - #shape{ in -webkit-animation:Spin 8s Infinite linear; -  to} + . Plane{ - position:Absolute; the width:200px; * Height:200px; $ background:#c23c00;Panax Notoginseng Border:1px solid #000; - font-size:100px; the Color:#fff; + text-align:Center; A Line-height:200px; the -webkit-transition:-webkit-transform 2s, opacity 2s; + transition:transform 2s, opacity 2s; - -webkit-backface-visibility:Hidden; $ backface-visibility:Hidden; $} - #shape. Backface. Plane{ - -webkit-backface-visibility:Visible; the backface-visibility:Visible; -}Wuyi  the . Cube>.one{ - Opacity:0.5; Wu -webkit-transform:Scale3d (1.2, 1.2, 1.2) Rotatex (90deg) Translatez (100px); - Transform:Scale3d (1.2, 1.2, 1.2) Rotatex (90deg) Translatez (100px) About} $ . Cube>.two{ - Opacity:0.5; - -webkit-transform:Scale3d (1.2, 1.2, 1.2) Translatez (100px); - Transform:Scale3d (1.2, 1.2, 1.2) Translatez (100px); A} + . Cube>.three{ the Opacity:0.5; - -webkit-transform:Scale3d (1.2, 1.2, 1.2) Rotatey (90deg) Translatez (100px); $ Transform:Scale3d (1.2, 1.2, 1.2) Rotatey (90deg) Translatez (100px); the} the . Cube >. Four{ the Opacity:0.5; the -webkit-transform:Scale3d (1.2, 1.2, 1.2) Rotatey (180deg) Translatez (100px); - Transform:Scale3d (1.2, 1.2, 1.2) Rotatey (180deg) Translatez (100px); in} the . Cube >. Five{ the Opacity:0.5; About -webkit-transform:Scale3d (1.2, 1.2, 1.2) Rotatey ( -90deg) Translatez (100px); the Transform:Scale3d (1.2, 1.2, 1.2) Rotatey ( -90deg) Translatez (100px); the} the . Cube >. Six{ + Opacity:0.5; - -webkit-transform:Scale3d (1.2, 1.2, 1.2) Rotatex ( -90deg) Translatez (100px); the Transform:Scale3d (1.2, 1.2, 1.2) Rotatex ( -90deg) Translatez (100px);Bayi} the @-webkit-keyframes Spin{ the 0% { - -webkit-transform:Rotatey (0); - Transform:Rotatey (0); the} the 100%{ the -webkit-transform:Rotatey ( -360deg); the Transform:Rotatey ( -360deg); -} the         } the @keyframes Spin{ the 0% {94 -webkit-transform:Rotatey (0); the Transform:Rotatey (0); the} the 100%{98 -webkit-transform:Rotatey ( -360deg); About Transform:Rotatey ( -360deg); -}101         }

Perspective: Sight Distance

transform-style:preserve-3d; 3d animation must be, and placed on the parent element

Translatez (100px) (100px is half the height)
The animation is added to the shape (the parent of the. Cube, the whole will rotate)

Html

<DivID= "Container" >       <DivID= "Stage">         <DivID= "Shape"class= "Cube Backface">                       <Divclass= "Plane One">1</Div>            <Divclass= "Plane ">2</Div>            <Divclass= "Plane three">3</Div>            <Divclass= "Plane Four">4</Div>            <Divclass= "Plane Five">5</Div>            <Divclass= "Plane Six">6</Div>         </Div>       </Div></Div> 

CSS3 animation effects: 3 3D Animations