css3旋转一圈(css div旋转)
CSS3中，如果初始化div已经绕Y轴旋转一定角度， 如何让div连续不停的绕Y轴旋转。
你现在可以旋转一圈吗，如果可以就用一个setInterval()方法来调用函数，它会不停的调用函数，
如果你现在只是写了这个静态的样式，有2中方法，
1种是把html5和css3中类似于时钟的做法，网上又很多，自己查一下，
第2中方法是做成一个3d效果的，js加上css3中专为3d设计的属性 rotateY()，你可以看一下
css3动画如何使三张图片围饶一个圆在运动
这个是利用{ transform:rotate(); } 设置旋转，旋转多少度决定圈数，时间和平缓度（变化模式）在动画里设置，另外你要设置一下你的旋转中心，把旋转中心设置到你规定的圆的圆心（transform-origin）。这样就可以让它们围绕这个中心点旋转了。
CSS3动画怎么让一个小圆点绕着一个圆运动
原理就是，先定义一个元素 ，然后定义动画XYZ轴偏移。
body??div??div:after?{
????content:?"";
????position:?absolute;
????top:?-5px;
????box-shadow:?0?0?12px?#fff;
????left:?50%;
????margin-left:?-5px;
????width:?5px;
????height:?5px;
????border-radius:?50%;
????background-color:?#fff;
????-webkit-animation:?particle_?2s?infinite?linear;
????animation:?particle_?2s?infinite?linear;
}
body??div:nth-of-type(4)??div,?body??div:nth-of-type(4)??div:after?{
????-webkit-animation-delay:?-1.5s;
????animation-delay:?-1.5s;
}
body??div??div?{
????width:?200px;
????height:?200px;
????position:?relative;
????-webkit-transform-style:?preserve-3d;
????-webkit-animation:?trail_?2s?infinite?linear;
????transform-style:?preserve-3d;
????animation:?trail_?2s?infinite?linear;
}
实施步骤：
建立一个BOX
在BOX中制作一个元素。
CSS动画定义BOX旋转按照你的轨迹。
通过。
-webkit-transform:rotateY( 0deg ) rotateZ( 0deg ) ?rotateX( 0deg );
? ? ? ? ?-moz-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
? ? ? -o-transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
? ? ? ? ? ? ? transform:rotateY( 0deg ) rotateZ( 0deg ) rotateX( 0deg );
来定义旋转方向，0是不旋转。0-360度是一圈。
? ? ? ?-webkit-transition:transform 1s;
transition:transform 1s;
这是设置动画时间。
一个BOX完成后，复制box，摆在统一中心点后，设置Z轴的数字。
css3中怎样定义动画的旋转中心点
1、首先新建一个html5文档，完成基本代码编写，如下图所示。
2、然后新建一个长100像素，高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。
css3 实现360度无线旋转
使用css3 属性方法 rotate() 实现旋转
transform-origin是规定如何旋转
: center center；为以围绕中心点旋转；
top left; 以围绕左上角旋转；
top right; 以围绕右上角旋转；