先看效果图：
由于上传的大小 原因 ，只能 录制 成这种效果，原图是无限循环的转圈。
代码：
<span style="font- Size: 18px;"><!DOCTY PE ht ML >
<html>
<head>
< ;m eta charset="utf-8" />
<t IT le>模拟摩天轮动画</title>
<style>
*{m arg in:0;padding:0;}
.image{width:80px;h ei ght:80px;}
.image1{width:620px;height:620px;}
.div1{position:relative;mar gin :10px auto;width:638px;
animation:run 20s linear infinite;
- webkit -animation:run 20s linear infinite;
-moz-animation:run 20s linear infinite;
-o-animation:run 20s linear infinite;
}
img :nth-child(2){
position:absolute;top:25px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center ;
-webkit -t ransform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(3){
position:absolute;top:580px;left:270px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(4){
position:absolute;top:300px;left:550px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
img:nth-child(5){
position:absolute;top:300px;left:0px;opacity:0.7;
animation:run2 20s linear infinite;
-webkit-animation:run2 20s linear infinite;
-moz-animation:run2 20s linear infinite;
-o-animation:run2 20s linear infinite;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
-o-transform-origin:top center;
}
@keyfr am es run
{
0%{transform:rotate(0 deg )}
100%{transform:rotate( 360 deg)}
}
@-webkit-keyframes run
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes run
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@-o-keyframes run
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(360deg)}
}
@keyframes run2
{
0%{transform:rotate(0deg)}
100%{transform:rotate(-360deg)}
}
@-webkit-keyframes run2
{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(-360deg)}
}
@-moz-keyframes run2
{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(-360deg)}
}
@-o-keyframes run2
{
0%{-o-transform:rotate(0deg)}
100%{-o-transform:rotate(-360deg)}
}
</style>
</head>
<body>
<div class="div1">
<img src="1.png" class="image1">
<img src="1. jpg " class="image">
<img src="2.jpg" class="image">
<img src="3.jpg" class="image">
<img src="4.jpg" class="image">
</div>
</body>
</html></span>
&nbs p; 摩天轮原图：
注释： transform-origin 属性允许您 改变 被转换元素的位置。
这个属性主要的作用就是选择一个位置，然后绕着这个位置旋转。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 CSS3 2D模拟实现摩天轮旋转效果 全部内容，希望文章能够帮你解决 CSS3 2D模拟实现摩天轮旋转效果 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS3 2D模拟实现摩天轮旋转效果的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201328