css3旋转基点（css3 实现360度无线旋转）
本文目录
- css3 实现360度无线旋转
- css3怎么设置永久旋转
- css3圆环旋转效果动画怎么做
- css3中怎样定义动画的旋转中心点
- css3系列之transform 详解rotate
- CSS transform中的rotate的旋转中心怎么设置
css3 实现360度无线旋转
使用css3 属性方法 rotate() 实现旋转
transform-origin是规定如何旋转
: center center；为以围绕中心点旋转；
top left; 以围绕左上角旋转；
top right; 以围绕右上角旋转；
css3怎么设置永久旋转
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
代码如下：可以复制运行下试试：
《html》
《head》
《style》
body {
background:#ddd;
}
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
***隐藏网址***
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
《/style》
《/head》
《body》
《div class="keleyi"》《/div》
《/body》
《/html》
css3圆环旋转效果动画怎么做
1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。
***隐藏网址***
2、然后写html结构，只需要一个div元素即可，class名字叫做img
***隐藏网址***
3、设置其边框为不同的颜色，边框宽度设置成100px。
***隐藏网址***
4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。
***隐藏网址***
5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码
***隐藏网址***
6、来看一下最后的效果，还是不错的。
***隐藏网址***
css3中怎样定义动画的旋转中心点
1、首先新建一个html5文档，完成基本代码编写，如下图所示。
2、然后新建一个长100像素，高50像素背景为红色的长方形图层。
3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。
4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。
5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。
css3系列之transform 详解rotate
rotate
rotateX
rotateY
rotateZ
rotate3d
rotate：
旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center)
加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。
rotateX：
讲这个之前呢， 先普及一个知识， 在transform里面，x y z 轴，分别是什么样子的，他跟我们平常的 x 和 y 不太一样，因为， 他是倒着的。 Z轴呢，在0 那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。
接下来，看看 所谓的 Z 轴是什么
rotateX 的X呢，可以写成大写的，也可以写成小写的x， 没有影响，这个属性呢，你加上rotateX 之后，这个元素，就会以 X 轴 旋转，里面填的是角度。
这样看起来，好像不是那么直观，毕竟是2D 的图， 来给他加了3D 的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0 点的那条x 轴旋转)
上面两个图，第一个图是在 2d的 情况下观看的，第二个图是 3d的时候， 是不是 3d 看起来比较直观。
那么，接下来，加上Y 一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢， 这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？
由于我设置的 transform-origin：center center ；定的点在中心，那么两条轴，是会成这样子的。
然后，看下，结果，是不是如我们所示？
最后，加上rotateZ
rotate3D：
设置一条主轴，然后根据这条轴旋转
这个呢，可以设置4个参数， 前三个是，x y z 最后一个是 角度deg 但是，此 x y z ，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg 那么就是 1：1：0 = 100：100：0 对吧，拿这个值来图解比较好。
CSS transform中的rotate的旋转中心怎么设置
使用transform-origin设置css3旋转中心，分别有两个参数，代表x和y轴的位置。
旋转参考的零点：元素左上角的位置或者说盒子模型的左上角。
参考点的坐标线：向右的x轴和几何x轴一样取正值，向下的y轴和几何y轴相反取正值，图解如下：
CSS transform中的rotate的旋转中心设置有两种：
1.使用关键字设置位置 transform-origin: center bottom;
第一个参数可选center、left、right。分别代表盒模型几何横向中间，横向左侧，横向右侧
第二个参数可选center、top、bottom。分别代表盒模型几何竖向中间，竖向头部，竖向底部
2.使用像素值设置位置 transform-origin:3px 40px; 两个参数为坐标值的x和y值，单位是像素。
更多文章：
form表单制作（为什么制作的form表单会在网页显示中多出一行）
2026年10月11日 09:10
teammate（teammate,company,partner）
2026年10月11日 06:10
javascript arraybuffer（javascript可以把base64编码转换成二进制代码吗求示例代码！）
2026年10月11日 04:00
text函数公式（excel中round和text函数的区别是什么）
2026年10月11日 03:50
2026年10月11日 02:40
google chrome打不开（chrome浏览器打不开怎么回事 浏览器打不开的处理方法）
2026年10月11日 02:00
websocket整合springboot（Springboot整合Websocket遇到的坑）
2026年10月11日 01:40
2026年10月11日 00:40
drawerlayout（android 怎样让drawerlayout设置的侧滑菜单的内容充满屏幕）
2026年10月10日 19:20
xor四位数怎么运算（单片机怎样用C语言实现4个数字间的异或）
2026年10月10日 17:50
