什么是 CSS 变换？
CSS Transform 是作为在网页上快速绘制高级显示和动画的规范而创建的。
变换基础知识（2D）
有四种基本的 CSS 变换：平移、旋转、缩放和倾斜。通过组合这四种变换操作，您可以自由地移动元素。 虽然本文仅限于 2D 变换，但 CSS Transform 也可以执行伪 3D 变换。基础知识是相同的，所以让我们首先了解 2D 变换。
基本操作
- translate:水平移动
- rotate:旋转
- scale:放大缩小
- skew:倾斜变形
对于旋转以外的三个操作，有两种方法分别指定XY，或者一次指定它们。 基本上没有什么违反直觉的地方，只是偏差不同。 即使你像这样分解它，含义也不会改变，translate(100px, 200px)但它是与不同的转换。 skew本身使用频率并不高，所以没必要强迫自己去记住它，但是遇到问题的时候请记住它。
translateX(100px)
translateY(200px)
skew(30deg, 15deg)
skewX(30deg)
skewY(30deg)
translate(200px，100px) X方向Y方向
translate(200px)
translate(200px,0)
translateX(200px)
translateY(100px)
合并操作
基本转换操作可以任意组合使用。 以下示例将元素缩放 2 倍并顺时针旋转 45 度。
#charactor {
transform: rotate(45deg) scale(2);
}还可以多次编写相同类型的转换。
transform 可以在中编写多个变换操作，但必须注意顺序。
translate rotate scale
变形参考点
除了合成顺序之外，一个重要元素是转换的参考点。 旋转和缩放是使用元素的中心作为参考隐式执行的，但实际上， 经常使用中心以外的参考。这可以在这种情况下使用 transform-origin
transform-origin 是一个经常使用的有用功能，但它本身并不是一个特殊功能，就像translate移动操作的简写。
transform-origin: left top; X方向 Y方向
transform-origin: 50% 100%;
transform-origin: 50px -100px
#### 聚合操作 matrix
transform您可以在 中编写任意数量的操作，因此乍一看，根据操作的数量，处理可能会变得越来越繁重。 实际上，多个变换操作一次聚合为一个变换操作matrix，并且该值（矩阵）用于一次执行所有变换操作。
使用这种矩阵的图像变换称为仿射变换，广泛应用于图像处理领域。
transform: rotate(30deg) translate(100px, 100px)
转换为 transform: matrix(0.866,0.5,-0.5,0.866, 36.6,136.6)
浏览器本身会为您进行矩阵计算，因此您通常不需要了解如何计算它们。然而，重要的是要知道在这些矩阵计算中，多个变换操作被合并为一个。
### CSS Transform 的常见问题
#### 添加 Transform 但是不起作用
同时添加多个分开的属性 会被覆盖掉此时需要写成一个
/* 上偏移 */
.float {
transform: translateY(-100px);
}
/* 倾斜 */
.tilt {
transform: skewX(30deg);
}
/* 两个公用 */
.float.tilt {
transform: translateY(-100px) skewX(30deg);
}
评论 (0)