用css3做3d立方体,CSS3实现3D立方体

利用CSS3 animation及transform实现一个404立方体盒子

点击查看效果

Paste_Image.png

3D立方体

*{

margin: 0;

padding: 0;

}

body{

background: #000;

}

.box{

width: 200px;

height: 200px;

margin: 200px auto 0;

position: relative;

}

.box img{

width: 200px;

height: 200px;

}

.show{

width: 200px;

height: 200px;

transform-style:preserve-3d;/*建立3d空间*/

-webkit-animation:play 4s linear infinite;

/*-webkit-兼容谷歌和苹果 动画名称为play 运动时间4s 匀速 无线循环*/

-moz-animation:play 2s linear infinite;/*-moz-兼容火狐*/

-o-animation:play 2s linear infinite;/*兼容欧朋*/

-ms-animation:play 2s linear infinite;/*兼容ie8以上*/

}

.show div{

width: 200px;

height: 200px;

position: absolute;

top: 0;

left: 0;

color: #fff;

opacity: 0.5;/*透明度为50%*/

font-size: 60px;

text-align: center;

line-height: 200px;

}

.show div:nth-child(1){

background: #f00;

transform:translateZ(100px);/*往前移动100px*/

}

.show div:nth-child(2){

background: #ff0;

transform:translateX(100px) rotateY(90deg);

}

.show div:nth-child(3){

background: green;

transform:translateY(100px) rotateX(90deg);

}

.show div:nth-child(4){

background: #0f0;

transform:translateZ(-100px);

}

.show div:nth-child(5){

background: #00f;

transform:translateX(-100px) rotateY(90deg);

}

.show div:nth-child(6){

background: #0ff;

transform:translateY(-100px) rotateX(90deg);

}

@-webkit-keyframes play{

0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

@-moz-keyframes play{

0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

@-0-keyframes play{

0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

@-ms-keyframes play{

0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}

100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}

}

404

404

404

404

404>

404