如何利用CSS transform属性实现元素的旋转与缩放？-css教程-PHP中文网

rotate()角度必须带单位（如deg），正数顺时针、负数逆时针，默认绕元素几何中心旋转；scale()等比或分别缩放，负值实现镜像；transform函数执行顺序从右往左，影响视觉结果。

如何利用css transform属性实现元素的旋转与缩放？

直接说结论：用 rotate() 控制旋转，scale() 控制缩放，两者可写在同一行 transform 值里，但执行顺序从右往左——这点最容易出错。

rotate() 的角度单位和方向怎么定？

必须带单位，常见的是 deg（度），比如 rotate(90deg)；也支持 rad（弧度）、turn（圈，1turn == 360deg）。正数默认顺时针，负数逆时针：rotate(-45deg) 就是逆时针转 45 度。

注意：rotate() 默认绕元素几何中心旋转。如果想绕左上角转，得配 transform-origin: top left；绕右下角就是 transform-origin: right bottom。不设的话，哪怕元素有 margin 或父容器 text-align: center，旋转中心仍是它自己的宽高中心，不是视觉居中点。

scale() 的参数怎么理解？

scale(1.5) 是 XY 轴等比放大 1.5 倍；scale(2, 0.5) 表示 X 轴放大 2 倍、Y 轴缩小为 0.5 倍；scaleX(0.8) 和 scaleY(-1) 也能单独用——后者会垂直翻转，相当于镜像。

容易踩的坑：

缩放会影响子元素，但不会改变元素自身的盒模型尺寸（比如 width/height 不变），所以 padding、border 也会被缩放，但 font-size 不会（除非显式设置）
scale(0) 会让元素完全消失（面积为 0），但依然占据文档流位置，也不触发重排
值为负数时不是报错，而是翻转：例如 scale(-1) 水平镜像，scale(-1, 1) 等价于 scaleX(-1)

rotate 和 scale 组合时为什么结果不对？

因为 transform 中多个函数的执行顺序是「从右到左」，不是书写顺序。比如：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

transform: rotate(30deg) scale(1.5);

实际先执行 scale(1.5)，再对放大后的元素执行 rotate(30deg)。如果写成：

transform: scale(1.5) rotate(30deg);

效果一样——顺序无关，解析器一律按「最右边函数最先应用」处理。

这意味着：缩放会影响旋转半径，旋转会影响缩放方向基准。如果你希望先转再缩，就得用嵌套容器拆开控制，或者用 matrix() 手动算变换矩阵——日常开发中，多数情况接受默认顺序即可，但做精确动画时必须验证视觉结果。

transform-origin 不只是“改中心点”那么简单

transform-origin 的值影响所有 transform 函数，不只是 rotate()。比如设成 transform-origin: 0 0 后，scale(2) 会以左上角为基点放大，右下部分会直接撑出容器；而 rotate(45deg) 也会绕左上角转，看起来像“甩出去”。

常用写法：