这个是在 Hbuilder 里面写的代码，效果不错。
逐一分析css的属性：
margin：与上面的边框的相隔的像素值，与左边相离像素值。
from {} to {} 这个表示从0°旋转到360°。
@keyframes rolldiv :这个是对动画进行定义，其中rolldiv是这个动画的名称，方便在后文中进行引用。
在这里面的animation里面便进行了引用，10s表示它整个动画维持的时间总和，linear infinite 这个则是表示它运行无限次，当然你也可以规定次数，比如3，就表示三次。
下面这个transform-style则表示它这个是3d的效果。
opacity表示它的透明度，最上方的照片我定义的为0.9。这个属性值的范围是0~1，从全透明变成不透明。
position 表示位置。
在下面来的就是这个我第一次见到的属性了！
因为我总共10张图片，然后需要旋转360°，于是每张图片旋转为36°，后面的translateZ(500px),表示距离旋转中心Z轴500个像素。
而前面的nth-child(1~10)表示每一张子图片。
style这个表示它是3d的效果。，后面这个perspective我的测试效果是，值越大，整体就越矮。
综述，这里面的图片也可以转换为video，加上js代码便可以实现鼠标置上时，播放视频等效果。过程也是比较简单的。
接下来，关于旋转，这里列举时钟的例子：
首先，不得不说，颜色搭配得不太美观，但是没关系，你可以自己尝试搭配你喜欢的颜色。
代码展示：
代码看起来也比较容易写，难度也不算很大。
left——>左间距，top——>上间距。
animation：动画定义后的实现及完成时间。
animation-iteration-count：次数，这里是无限次。
transform-origin：这里表示旋转中心点分别在width和height的所占比例，由于，我在追求美观，希望针尾长度一致，所以这里的比例便不同。需要编程人员自己计算，so easy!
然后结合上面提到的旋转木马，其实这个就很容易理解了。
心向旋转巧得木马 峰回路转偶得时钟 希望总有一款可以让我们更加了解css!
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 