CSS3 3D旋转动画

2017-01-13 10:51:25来源:csdn作者:csdn9_14人点击


话不多说,先上效果图:




代码:

<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
<title>3D动画</title>
<style type="text/css">
*{margin:0; padding:0;}
img{width:300px; height:300px; border:0}
ul{
position:relative; width:300px; height:300px; margin:200px auto;
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
}
li{position:absolute; width:300px; height:300px; list-style:none;}
li:nth-child(1){
transform:rotateX(90deg) translateZ(150px);
-webkit-transform:rotateX(90deg) translateZ(150px);
-moz-transform:rotateX(90deg) translateZ(150px);
}
li:nth-child(2){
transform:rotateX(-90deg) translateZ(150px);
-webkit-transform:rotateX(-90deg) translateZ(150px);
-moz-transform:rotateX(-90deg) translateZ(150px);
}
li:nth-child(3){
transform:rotateY(90deg) translateZ(150px);
-webkit-transform:rotateY(90deg) translateZ(150px);
-moz-transform:rotateY(90deg) translateZ(150px);
}
li:nth-child(4){
transform:rotateY(-90deg) translateZ(150px);
-webkit-transform:rotateY(-90deg) translateZ(150px);
-moz-transform:rotateY(-90deg) translateZ(150px);
}
li:nth-child(5){
transform:rotateY(180deg) translateZ(150px);
-webkit-transform:rotateY(180deg) translateZ(150px);
-moz-transform:rotateY(180deg) translateZ(150px);
}
li:nth-child(6){
transform:rotateX(0deg) translateZ(150px);
-webkit-transform:rotateX(0deg) translateZ(150px);
-moz-transform:rotateX(0deg) translateZ(150px);
}
ul{animation:run 3s linear infinite;}
@keyframes run
{
0%{transform:rotateX(0deg) rotateY(0deg)}
100%{transform:rotateX(360deg) rotateY(360deg)}
}
@-webkit-keyframes run
{
0%{-webkit-transform:rotateX(0deg) rotateY(0deg)}
100%{-webkit-transform:rotateX(360deg) rotateY(360deg)}
}
@-moz-keyframes run
{
0%{-moz-transform:rotateX(0deg) rotateY(0deg)}
100%{-moz-transform:rotateX(360deg) rotateY(360deg)}
}
</style>
</head>
<body>
<ul>
<li><img src="1.jpg"></li>
<li><img src="2.jpg"></li>
<li><img src="3.jpg"></li>
<li><img src="4.jpg"></li>
<li><img src="5.jpg"></li>
<li><img src="6.jpg"></li>
</ul>
</body>
</html></span></span>


动画是使元素从一种样式逐渐变化为另一种样式的效果。



您可以改变任意多的样式任意多的次数。



请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。



0% 是动画的开始,100% 是动画的完成。



为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。


<span style="font-size:18px;color:#ff6600;"><strong>ul{animation:run 3s linear infinite;}</strong></span>将run绑定到ul上,时长3s,匀速无限。



transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。







preserve-3d

子元素将保留其 3D 位置。


注释:

Internet Explore10和Firefox支持3D转换。


Chrome和Safari需要前缀-webkit-。


Opera仍然不支持3D转换(它只支持2D转换)。


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台