css3多张图片怎么绕中心轴旋转

html-css021

css3多张图片怎么绕中心轴旋转,第1张

问问题要有逻辑，要描述清楚需求，语言无法表达的就配图，不然别人根本不知道你要的什么。首先：轴向有3个：x、y、z，都可以理解为某一方向的中心，你要围绕那根转呢？然后：多张图片的合集在空间上有一个共有的全局x、y、z轴接着：每张图片又有自己局部的x、y、z轴你是要全局轴上转还是局部轴上转或者全局和局部轴都转呢？如果你要都转的话，就像地球自转公转一样，那你自转时方向跟公转统一还是反向或是随机呢？每张图片自转速度要统一还是要随机呢，随机速度值有个参考范围么？问题描述不清楚，就包含了很多可能性，你如果问：很多张图片围一个圆圈，图片围绕圆心旋转，那这个问题大方向就只有两个可能了：形式1：“ ⊙ ” 外圈是图片路径，中点是圆心形式2： ”中 ” 口字是图片，中间竖线是圆心 ( 2即把形式1视角方向旋转90度以后的视角 )

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

2、然后写html结构，只需要一个div元素即可，class名字叫做img

3、设置其边框为不同的颜色，边框宽度设置成100px。

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

6、来看一下最后的效果，还是不错的。