CSS transform 属性概述
在现代网页设计中，动态效果和视觉交互扮演着重要角色。css transform 属性是实现元素二维或三维变换的关键工具，它允许我们对元素进行平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）等操作。这些变换不会影响文档流中的其他元素，提供了一种非破坏性的视觉调整方式。
rotate() 函数：基本旋转
transform 属性通过各种函数实现特定的变换。其中，rotate() 函数用于实现元素的旋转。它的基本语法如下：
transform: rotate(angle);
这里的 angle 参数定义了旋转的角度，可以使用 deg（度）、rad（弧度）、grad（梯度）或 turn（圈数）等单位。
- 正角度：在默认的从左到右（LTR）文本方向下，正角度表示顺时针旋转。
- 负角度：在LTR文本方向下，负角度表示逆时针旋转。
- 文本方向影响：值得注意的是，旋转方向会受到文本书写方向的影响。在从右到左（RTL）的文本环境中，正角度将表示逆时针旋转，而负角度则表示顺时针旋转。
示例：
.element-rotate {
transform: rotate(45deg); /* 顺时针旋转45度 */
}
.element-rotate-negative {
transform: rotate(-30deg); /* 逆时针旋转30度 */
}默认情况下，所有 transform 变换都围绕元素的中心点进行。这意味着当您旋转一个元素时，它的中心点会保持在原地，而元素的其他部分则围绕这个中心点移动，就像一个转动的唱片。
立即学习“前端免费学习笔记（深入）”；
核心概念：transform-origin 自定义旋转锚点
在许多场景下，我们希望元素围绕其自身的某个特定点而不是中心点进行旋转，例如，像时钟指针一样，围绕其左侧或底部进行旋转。这时，transform-origin 属性就派上用场了。transform-origin 允许我们精确地定义元素变换的原点（或称锚点、支点）。
transform-origin 的值类型
transform-origin 属性可以接受一到三个值，分别代表 X 轴、Y 轴和 Z 轴的偏移量。对于二维旋转，我们主要关注 X 轴和 Y 轴。
-
关键词：
- X 轴：left, center, right
- Y 轴：top, center, bottom
- 默认值是 center center。
- 例如：transform-origin: left top; 会将旋转锚点设置在元素的左上角。
-
百分比：
- 相对于元素自身的宽度（X 轴）和高度（Y 轴）。
- 0% 表示左/上边缘，50% 表示中心，100% 表示右/下边缘。
- 例如：transform-origin: 25% 75%; 会将锚点设置在元素宽度25%和高度75%的位置。
-
长度单位：
- 使用 px, em, rem 等绝对或相对长度单位。
- 相对于元素的左上角。
- 例如：transform-origin: 20px 10px; 会将锚点设置在距离元素左边缘20像素、上边缘10像素的位置。
如何设置自定义锚点
要实现自定义锚点旋转，只需在 transform 属性之前或之后（通常建议在之前定义）设置 transform-origin 属性。
示例：实现左侧锚点旋转
假设我们有一个 div 元素，我们希望它像时钟指针一样，以其左侧边缘为支点进行旋转。
HTML 结构：
<div class="container"> <div class="rotatable-element"></div> </div>
CSS 样式：
.container {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
display: flex;
justify-content: center;
align-items: center;
margin: 50px auto;
position: relative; /* 用于定位内部元素 */
}
.rotatable-element {
width: 100px;
height: 20px;
background-color: dodgerblue;
position: absolute; /* 使其脱离文档流，方便定位和旋转 */
top: 50%; /* 垂直居中 */
left: 50px; /* 距离左侧50px */
transform: translateY(-50%); /* 修正垂直居中 */
transition: transform 0.5s ease-in-out; /* 添加过渡效果，使其旋转平滑 */
}
/* 默认旋转（围绕中心） */
.rotatable-element.default-rotate:hover {
transform: translateY(-50%) rotate(90deg); /* 注意：rotate() 会覆盖之前的 transform 属性，所以需要合并 */
}
/* 围绕左侧边缘旋转 */
.rotatable-element.left-anchor:hover {
transform-origin: left center; /* 设置旋转锚点在左侧中心 */
transform: translateY(-50%) rotate(90deg); /* 再次合并 translateY */
}
/* 围绕右下角旋转 */
.rotatable-element.bottom-right-anchor:hover {
transform-origin: 100% 100%; /* 设置旋转锚点在右下角 */
transform: translateY(-50%) rotate(90deg);
}
/* 围绕特定像素点旋转 */
.rotatable-element.custom-pixel-anchor:hover {
transform-origin: 10px 5px; /* 设置旋转锚点在距离左边缘10px, 上边缘5px处 */
transform: translateY(-50%) rotate(90deg);
}在这个例子中，当鼠标悬停在 .rotatable-element.left-anchor 上时，它会以其自身的左侧中心点为支点进行90度旋转。
高级应用与注意事项
与 transform 其他函数的结合：transform-origin 影响所有 transform 函数。如果一个元素同时应用了 translate 和 rotate，那么 translate 会先基于默认原点（或已设置的 transform-origin）移动元素，然后 rotate 会基于新的 transform-origin 进行旋转。为了避免混淆，建议将多个 transform 函数写在同一个 transform 声明中，并且 transform-origin 应该在 transform 之前声明。
浏览器兼容性与性能： 现代浏览器对 transform 和 transform-origin 的支持已非常完善，通常无需添加浏览器前缀。然而，对于一些老旧浏览器（如IE9及以下），这些属性可能不被支持。transform 属性通常由GPU加速，因此在动画和交互中具有良好的性能。
三维旋转：transform-origin 也可以用于三维旋转。例如，transform-origin: 50% 50% 0; 是默认值，表示在 Z 轴上没有偏移。您可以通过设置第三个值来调整三维旋转的深度锚点。
默认值： 请记住，transform-origin 的默认值是 50% 50% 或 center center。如果您不设置它，所有变换都将围绕元素的中心进行。
总结
transform-origin 属性是 CSS transform 模块中一个强大而灵活的工具，它赋予了开发者精确控制元素旋转、缩放等变换原点的能力。通过熟练运用 transform-origin，我们可以摆脱默认的中心旋转限制，实现更加丰富、真实的动画效果和复杂的布局需求。理解并实践不同类型的值（关键词、百分比、长度单位）将帮助您在各种场景下灵活地应用这一关键属性。
