Today, we share a 3D cube rotation effect based on CSS3. This special effect applies to browsers: 360, FireFox, Chrome, Safari, Opera, Proud tour, Sogou, the window of the world. IE8 and the following browsers are not supported. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Divclass= "Wrap"> <Divclass= "box1 box">1</Div> <Divclass= "box2 box">2</Div> <Divclass= "box3 box">3</Div> <Divclass= "box4 box">4</Div> <Divclass= "box5 box">5</Div> <Divclass= "box6 box">6</Div> </Div>
CSS3 Code:
*{margin:0;padding:0;}Html,body{Height:100%;background:Black;}. Wrap{Height:100%;position:relative;-webkit-transform-style:preserve-3d;-webkit-perspective:0px;-moz-transform-style:preserve-3d;-moz-perspective:0px;-webkit-animation:Mydhua 5s Ease Infinite;-moz-animation:Mydhua 5s Ease Infinite; }. Box{width:200px;Height:200px;position:Absolute;Top:50%; Left:50%;margin:-100px 0 0-100px;Line-height:200px;text-align:Center;font-size:48px;Color: White; }. Box1{-webkit-transform:Rotatey (90deg) Translatez ( -100px);-moz-transform:Rotatey (90deg) Translatez ( -100px);background:Rgba (128,0,128,.5);}. Box2{-webkit-transform:Rotatey (90deg) Translatez (100px);-moz-transform:Rotatey (90deg) Translatez (100px);background:Rgba (255,0,255,.5);}. Box3{-webkit-transform:Rotatex (90deg) Translatez (100px);-moz-transform:Rotatex (90deg) Translatez (100px);background:Rgba (255,153,204,.5);}. Box4{-webkit-transform:Rotatex (90deg) Translatez ( -100px);-moz-transform:Rotatex (90deg) Translatez ( -100px);background:Rgba (0,204,255,.5);}. Box5{-webkit-transform:Translatez ( -100px);-moz-transform:Translatez ( -100px);background:Rgba (153,204,255,.5);}. box6{-webkit-transform:Translatez (100px);-moz-transform:Translatez (100px);background:Rgba (0,255,255,.5);}@-webkit-keyframes Mydhua{0%{-webkit-transform:Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);-webkit-transform-origin:Center Center;}100%{-webkit-transform:Rotatex (180deg) Rotatey (180deg) Rotatez (180deg);-webkit-transform-origin:Center Center; }}@-moz-keyframes Mydhua{0%{-moz-transform:Rotatex (0deg) Rotatey (0deg) Rotatez (0deg);-webkit-transform-origin:Center Center;}100%{-moz-transform:Rotatex (180deg) Rotatey (180deg) Rotatez (180deg);-webkit-transform-origin:Center Center;}}
via:http://www.w2bc.com/article/16554
3D cube rotation effect based on CSS3