使用CSS transform属性的rotate()函数可实现HTML元素旋转，正值顺时针、负值逆时针，如transform: rotate(45deg)；通过transform-origin可更改旋转中心点，如top left或具体坐标；结合:hover与transition可实现平滑动态旋转效果；还支持与scale、rotateX、rotateY等组合进行2D或3D变换，灵活实现丰富视觉效果。
要让HTML元素实现旋转效果，可以通过CSS的
属性配合
函数来完成。这个方法不会影响页面布局，只在视觉上改变元素的方向。
使用transform: rotate() 实现旋转
rotate()
函数用于定义元素绕其中心点旋转的角度。正值表示顺时针旋转，负值表示逆时针旋转。
基本语法如下：
transform: rotate(45deg);
示例：将一个div元素旋转45度
立即学习
“
前端免费学习笔记（深入）
”；
设置旋转中心点（transform-origin）
默认情况下，元素围绕自己的中心点（50% 50%）旋转。你可以通过
transform-origin
属性更改旋转原点。
例如，让元素绕左上角旋转：
transform: rotate(45deg);transform-origin: top left;
也可以使用像素或具体百分比定位：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
transform-origin: 0 0; /* 等同于 top left */transform-origin: 20% 80%;transform-origin: 10px 30px;
在hover状态下实现动态旋转
结合CSS伪类，可以实现鼠标悬停时旋转的效果，增强交互性。
这里使用了
transition
让旋转过程更平滑。
支持多轴与组合变换
除了平面旋转，还可以结合其他变换函数实现更复杂效果。
比如同时旋转并缩放：
transform: rotate(45deg) scale(1.2);
或者进行3D旋转（需开启3D空间）：
transform-style: preserve-3d;transform: rotateX(45deg); /* 绕X轴旋转 */transform: rotateY(30deg); /* 绕Y轴旋转 */
基本上就这些。使用
是实现网页元素旋转变换最简单有效的方式，灵活搭配
和
能实现丰富的视觉效果。
transformrotate()transform: rotate()transform-origintransition