After learning the C3, I made a small demo of 3D rotation. Individual Pro guess compatible with chrome, Firefox, Opera, Safari, not considering ie.
If there is a problem with the code below, you can view the source code on my github.
You can view the Web page effect demo address.
The/* code is as follows: */<!doctype html><html> <head> <title>Ccs3animation--3drotate</title> <meta charset="Utf-8"/> <style> #Panel{ margin:0 Auto ; width:px ; height:px ; background-color:Transparent ; position:relative ; -webkit-transform-style:preserve-3d ; -webkit-transform:Rotatex (-33.5deg)rotatey (deg) ; -webkit-animation:Rota 2s linear 0s infinite normal ; -moz-transform-style:preserve-3d ; -moz-transform:Rotatex (-33.5deg)rotatey (deg) ; -moz-animation:Rota 2s linear 0s infinite normal ;} @-webkit-keyframes Rota{ from{ -webkit-transform:Rotatex (-33.5deg)rotatey (deg) ; } to{ -webkit-transform:Rotatex (-33.5deg)Rotatey ( 405deg) ; }}@-moz-keyframes Rota{ from{ -moz-transform:Rotatex (-33.5deg)rotatey (deg) /c9>; } to{ -moz-transform:Rotatex (-33.5deg)rotatey (405deg)
; } }#Panel Div{ width:px ; Height: +px ; opacity:0.4 ; position:Absolute ; top:202px ;Left :202px ;} #Panel #top{ background-color:red; -webkit-transform:Rotatex (deg)translatez (px) ; -moz-transform:Rotatex (deg)translatez (px) ; } #Panel #bottom{ background-color:pink; -webkit-transform:Rotatex (deg)translatez (-px) ; -moz-transform:Rotatex (deg)translatez (-px) ; } #Panel #left{ background-color:green; -webkit-transform:translatez (-px); -moz-transform:translatez (-px); } #Panel #right{ background-color:blue; -webkit-transform:translatez (px); -moz-transform:translatez (px); } #Panel #front{ background-color:yellow; -webkit-transform:rotatey (deg)translatez (px) ; -moz-transform:rotatey (deg)translatez (px) ; } #Panel #back{ background-color:black; -webkit-transform:rotatey (deg)translatez (-px) ; -moz-transform:rotatey (deg)translatez (-px) ; } </style> </head> <body> <div id="Panel"> <div id="Top"></div> <div id="Bottom"></div> <div id="Left"></div> <div id="Right"></div> <div id="front"></div> <div id="Back"></div> </div> </body></html>
CSS3 Animation -3d Rotation