HTML5 CSS3 实现旋转的3D正方体

标签：spec   暂停   targe   jpg   前缀   位置   comment   播放   sla   

1.transform属性对元素进行旋转、缩放、移动或倾斜。具体参考：http://www.w3school.com.cn/cssref/pr_transform.asp

　　transform-style: preserve-3d;使被转换的子元素保留其 3D 转换，具体参考：http://www.w3school.com.cn/cssref/pr_transform-style.asp

　　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(匀速);

　　具体参考：http://www.w3school.com.cn/cssref/pr_animation.asp

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

　　具体参考：http://www.w3school.com.cn/cssref/pr_animation-play-state.asp

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

　　具体参考：http://www.w3school.com.cn/cssref/pr_animation-fill-mode.asp

备：透明效果 opacity: 0.9;

附上代码：

注：图片可自行修改！

HTML：

<div class="outbox">
<div class="smallbox">
<div class="mydiv rx"><img src="img/1.jpg"></div>
<div class="mydiv ry"><img src="img/2.jpg"></div>
<div class="mydiv rz"><img src="img/3.jpg"></div>
<div class="mydiv tx"><img src="img/4.jpg"></div>
<div class="mydiv ty"><img src="img/5.jpg"></div>
<div class="mydiv tz"><img src="img/6.jpg"></div>
</div>
</div>

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);
}

 运行效果图：

HTML5 CSS3 实现旋转的3D正方体

标签：spec   暂停   targe   jpg   前缀   位置   comment   播放   sla   

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