CSStransform旋转缩放技巧详解

想让你的网页元素动起来吗？本文详细介绍CSS `transform`属性中`rotate()`和`scale()`函数的妙用，教你轻松实现元素的旋转与缩放效果。通过`rotate(45deg)`让元素顺时针旋转，负值则逆时针；使用`scale(1.5)`放大元素，`scale(2, 0.5)`则可分别控制X、Y轴的缩放比例。更高级的用法是组合多个`transform`函数，例如`rotate(30deg) scale(1.2)`，实现更丰富的视觉效果。此外，我们还探讨了`transform-origin`属性，它允许你自定义变换的中心点，让动画效果更加精准。掌握这些技巧，配合`transition`属性，就能为你的网站增添更多生动有趣的动画效果，提升用户体验，快来学习吧！

使用 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 中组合多个函数，实现复合变换。

注意：

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

示例：

.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;
}

基本上就这些。合理使用 transform 能提升界面动效表现力，且性能较好，适合结合 transition 实现平滑动画。

终于介绍完啦！小伙伴们，这篇关于《CSStransform旋转缩放技巧详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！