1. [Image] 20140811233657.jpg 2. [Image] 120140811233846.jpg
? 3. Code [CSS] Code
Body {
Background-color: #efefef;
}
#Main {
width:100%;
Text-align:center;
height:300px;
margin:0 Auto;
margin-top:100px;
}
. Cubic {
width:300px;
height:300px;
margin:0 Auto;
transition-duration:6s;
-webkit-transform-style:preserve-3d;
-webkit-transform:rotatex ( -10deg) Rotatey ( -10deg);
Transform:rotatex ( -10deg) Rotatey ( -10deg);
transform-style:preserve-3d;
-webkit-animation:run 5s linear Infinite;
}
. cubicitem {
width:300px;
height:300px;
Position:absolute;
Text-align:center;
line-height:300px;
font-size:50px;
Font-weight:bold;
Color: #333;
Background-color: #ccc;
Transition-duration:2s;
}
. Cubicitem:nth-child (1) {
-webkit-transform:translatez (150px);
Transform:translatez (150px);
-moz-transform:translatez (150px);
-ms-transform:translatez (150px);
-o-transform:translatez (150px);
Display:none; Flash Plugin
} http://www.huiyi8.com/flashchajian/?
. Cubicitem:nth-child (2) {
-webkit-transform:rotatex (180DEG);
Transform:rotatex (180DEG);
-moz-transform:rotatex (180DEG);
-ms-transform:rotatex (180DEG);
-o-transform:rotatex (180DEG);
-webkit-transform:translatez ( -150px);
Transform:translatez ( -150px);
-moz-transform:translatez ( -150px);
-ms-transform:translatez ( -150px);
-o-transform:translatez ( -150px);
}
. Cubicitem:nth-child (3) {
-webkit-transform:rotatey (270deg) Translatez (150px);
Transform:rotatey (270deg) Translatez (150px);
-moz-transform:rotatey (270deg) Translatez (150px);
-ms-transform:rotatey (270deg) Translatez (150px);
-o-transform:rotatey (270deg) Translatez (150px);
}
. Cubicitem:nth-child (4) {
-webkit-transform:rotatey (90deg) Translatez (150px);
Transform:rotatey (90deg) Translatez (150px);
-moz-transform:rotatey (90deg) Translatez (150px);
-ms-transform:rotatey (90deg) Translatez (150px);
-o-transform:rotatey (90deg) Translatez (150px);
}
. Cubicitem:nth-child (5) {
-webkit-transform:rotatex (90deg) Translatez (150px);
Transform:rotatex (90deg) Translatez (150px);
-moz-transform:rotatey (90deg) Translatez (150px);
-ms-transform:rotatey (90deg) Translatez (150px);
-o-transform:rotatey (90deg) Translatez (150px);
}
. Cubicitem:nth-child (6) {
-webkit-transform:rotatex (270deg) Translatez (150px);
Transform:rotatex (270deg) Translatez (150px);
-moz-transform:rotatex (270deg) Translatez (150px);
-ms-transform:rotatex (270deg) Translatez (150px);
-o-transform:rotatex (270deg) Translatez (150px);
}
CSS3 3D Stereo Cabinet Implementation
