css3transform偏移（css3的问题 transform旋转问题）
本文目录
css3的问题 transform旋转问题
并没有出现你描述的情况，谷歌浏览器下，确实是以顶部中心点为轴心左右摆动。
如果你不是，查看下代码，是否样式出现了覆盖的情况。
《!DOCTYPE html》《html》
《head》
《meta charset=“UTF-8“》
《meta name=“viewport“ content=“width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no“/》
《title》Document《/title》
《style type=“text/css“》
.rot{-webkit-animation:rot 3s linear;}
@-webkit-keyframes rot{
0%,20%,40%,60%,80%,100%{transform-origin:top center;}
0%{transform: rotate(0deg);}
20%{transform:rotate(20deg);}
40%{transform:rotate(-15deg);}
60%{transform:rotate(10deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
《/style》
《/head》
《body》
《img src=“pcj/aa/img/h_icon.png“ class=“rot“ /》
《/body》
《/html》
CSS transform中的rotate的旋转中心怎么设置
1、我们用两个相同的div它，这是基本的div代码。
2、这是一个没有旋转的div。然后我们只设置灰蓝色div的旋转，以便我们确切地知道旋转中心点是什么。
3、设置灰蓝色div是使用.t类名，然后使用变换，然后旋转。注意角度是deg，这里我们设置旋转45度。
4、然后查看对比度，灰色蓝色div已旋转，旋转的中心点默认为div的中心。
5、如果我们想设置旋转的中心点，我们可以使用transform-origin属性。将旋转中心设置为左上角，这意味着左上角是旋转中心。
6、此时，旋转中心已经改变，它已经变为左上角。效果如下。
更多文章：
2026年10月15日 12:00
windows程序设计第五版（《WINDOWS程序设计》和《WINDOWS核心编程》的区别）
2026年10月15日 11:30
issued retroactively（FORM E上盖“ISSUED RETROACTIVELY”的问题，小女在线等待）
2026年10月15日 10:30
2026年10月15日 10:10
begin和start的区别（start与begin的区别）
2026年10月15日 09:20
vant官网中文（范特365 是韩国化妆品VANT36.5吗）
2026年10月15日 09:10
2026年10月15日 08:10
2026年10月15日 07:30
prison break（越狱（prison break）到底是在讲个什么）
2026年10月15日 06:50
c程序设计第五版教学视频（求C程序设计（第五版）谭浩强教材源代码、视频课件等电子版资料！谢谢大家！）
2026年10月15日 06:40
