css transform属性如何实现元素旋转与缩放

使用 rotate() 和 scale() 可实现元素旋转与缩放，rotate(45deg) 顺时针旋转，负值逆时针，scale(1.5) 放大，scale(2, 0.5) 控制XY轴独立缩放，transform 可组合多个函数如 rotate(30deg) scale(1.2)，执行顺序从右到左，transform-origin 可修改变换中心点，默认为元素中心，常配合 transition 实现高性能动画效果。

CSS 的 transform 属性可以轻松实现元素的旋转、缩放、平移和倾斜等视觉效果。要实现旋转与缩放，主要使用 rotate() 和 scale() 函数。

元素旋转（rotate）

使用 rotate() 可以让元素围绕其中心点进行旋转，单位是度（deg）。

• transform: rotate(45deg); 表示顺时针旋转45度。
• 负值为逆时针旋转，如 rotate(-30deg)。
• 旋转基于元素的中心点（可配合 transform-origin 修改）。

.box {
  transform: rotate(45deg);
}

元素缩放（scale）

使用 scale() 可以改变元素的大小。

• scale(1.5) 表示在 X 和 Y 轴同时放大到 1.5 倍。
• scale(2, 0.5) 第一个参数控制水平方向（X轴），第二个控制垂直方向（Y轴）。
• 值小于 1 表示缩小，大于 1 表示放大，等于 1 为原始大小。

.box {
  transform: scale(1.2, 0.8);
}

同时旋转与缩放

可以在 transform 中组合多个函数，实现复合变换。

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

立即学习“前端免费学习笔记（深入）”；

• 多个变换函数用空格分隔。
• 执行顺序从右往左（实际渲染顺序会影响结果）。

.box {
  transform: rotate(30deg) scale(1.2);
}

先缩放再旋转（书写顺序影响最终表现）。

调整变换原点

默认变换以元素中心为基准点，可通过 transform-origin 修改。

• transform-origin: top left;
• transform-origin: 50% 50%;（等同于 center）
• transform-origin: right bottom;

.box {
  transform: rotate(45deg);
  transform-origin: top left;
}

以上就是css transform属性如何实现元素旋转与缩放的详细内容，更多请关注php中文网其它相关文章！