html5实现3d正方形旋转,HTML5 CSS3 实现旋转的3D正方体

rotate3d与translate3d的参数为：(0/1,0/1,0/1,deg/px) 0代表不旋转或移动，1代表旋转或移动，最后一个参数为旋转的角度或移动的距离

perspective(px) 是transform中的属性，代表视角，距离越小元素变化越夸张

关于Z轴，在元素旋转的时候Z轴位置会随着旋转的角度改变，也就是说一个正面的正方体以X轴旋转90度后Z轴由原先的从上到下变为从后到前，其他轴也一致

注：谷歌浏览器需要加-webkit-的前缀，火狐-moz-，IE-ms-，Opera -o-

2.animation为元素添加动画效果

animation: 动画名 时长s infinite(循环) linear(匀速);

-webkit-animation-play-state: paused/running; 暂停播放/继续播放

-webkit-animation-fill-mode:forwards;播放结束后元素保持动画最后一帧的效果(由于循环没有结束的时候所以对循环无效)

备：透明效果 opacity: 0.9;

附上代码：

注：图片可自行修改！

HTML：

CSS:

body,html{

margin: 0;

padding: 0;

background: url(../img/3.jpg) no-repeat;

width: 100%;

height: 100%;

overflow: hidden;

background-size:cover;

}

.outbox img{

width: 300px;

height: 300px;

}

.outbox{

width: 300px;

height: 300px;

margin: 200px auto 0;

}

.smallbox{

width: 300px;

height: 300px;

transform-style: preserve-3d;

position: relative;

animation: anibox 15s infinite linear;

/*-webkit-animation-fill-mode:forwards;*/

}

.smallbox:active{

-webkit-animation-play-state: paused;

}

@keyframes anibox{

0%{-webkit-transform: perspective(800px) rotate3d(0,0,0,0deg) rotateX(0deg);translateZ(0px);}

25%{-webkit-transform: perspective(800px) rotate3d(1,0,0,360deg) rotateY(180deg);translateZ(500px);}

50%{-webkit-transform: perspective(800px) rotate3d(1,0,0,720deg) rotateX(180deg);translateZ(1000px);}

75%{-webkit-transform: perspective(800px) rotate3d(0,1,0,360deg) rotateY(360deg);translateZ(500px);}

100%{-webkit-transform: perspective(800px) rotate3d(0,1,0,720deg) rotateX(360deg);translateZ(0px);}

}

.mydiv{

position: absolute;

width: 300px;

height: 300px;

opacity: 0.9;

}

.rx{

-webkit-transform:

rotateX(90deg)

translateZ(150px);

}

.ry{

-webkit-transform:

rotateY(90deg)

translateZ(150px);

}

.rz{

-webkit-transform:

rotateY(-90deg)

translateZ(150px);

}

.tx{

-webkit-transform:

rotateX(-90deg)

translateZ(150px);

}

.ty{

-webkit-transform:translateZ(150px);

}

.tz{

-webkit-transform:

rotateX(180deg)

translateZ(150px);

}

运行效果图：

原文：http://www.cnblogs.com/lexin593119348/p/6835457.html