Today I will share with you a 3D cube rotation special effect based on css3. This special effect is suitable for browsers: 360, FireFox, Chrome, Safari, Opera, Maxthon, Sogou, and World Window. IE8 and below browsers are not supported. The renderings are as follows:
Online preview Source code download
Implemented code.
html code:
<div class="wrap"> <div class="box1 box"> 1</div> <div class="box2 box"> 2</div> <div class="box3 box"> 3</div> <div class="box4 box"> 4</div> <div class="box5 box"> 5</div> <div class="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;}}