CSS变换-编程知识

CSS变换

根据 CSS 的变换的功能特性，它可以分为位移、旋转、缩放、倾斜和透视：

也可以分成2D变换和3D变换，2D变换是二维平面上进行的，即 X 轴和 Y 轴。这些变换不涉及 Z 轴。3D 变换允许元素在三维空间中进行操作，这些变换涉及 X 、Y 和 Z 轴。这使得元素可以在视觉上远离或靠近观察者，创造出更加逼真的三维效果。

transform 属性包含多个变换函数时，它的顺序很重要，是从左向右应用的，从左到右乘以变换属性中的每个变换函数。

.element {transform: translate(60px, 60px) scale(1.5, 1.5) rotate(45deg);
}.element {transform: rotate(45deg) scale(1.5, 1.5) translate(60px, 60px);
}

transform 属性中的 translate(60px, 60px) 和 rotate(45deg) 两个变换函数互换了一下位置。最终呈现给用户的结果是完全不同的。

CSS 的变换函数有近 20 种不同的函数，它们分别用来帮助你对元素进行平移、旋转、缩放、倾斜和透视：

平移：translate() 、translateX() 、translateY() 、translateZ() 和 translate3d()
旋转：rotate() 、rotateX() 、rotateY() 、rotateZ() 和 rotate3d()
缩放：scale() 、scaleX() 、scaleY() 、scaleZ() 和 scale3d()
倾斜（有时也称扭曲） ：skew() 、skewX() 和 skewY() 。注意，它没有 3D 空间的概念，在 CSS 中并没有 skewZ() 和 skew3d() 两个函数
透视：perspective() ，它有对应的一个 CSS 属性，即 perspective

除了上面所列的 CSS 变换函数之外，还有两个矩阵函数，它们分别是 2D 矩阵 matrix() 和 3D 矩阵 matrix3d() 。

平移函数 `translate()`

x 轴移动语法 : transform: translateX(x);
y 轴移动语法 : transform: translateY(y);
x / y 轴移动语法 : transform: translate(x, y);

沿 x 轴水平移动，正值向右移动，负值向左移动

沿 y 轴上下移动，正值向下移动，负值向上移动

可以是一个长度值（<length>）、百分比值（<percentage>），还可以是其他的数学函数表达式值

注意：translate() 函数的参数是个百分比值时，该百分比值是相对于元素自身的大小计算，而不是父容器尺寸计算，即 x 轴方向相对于元素的 width 计算，y 轴方向相对于元素的 height 计算。

/* 只沿 x 轴移动元素 */
.element {transform: translateX(var(--positionX));/* 等同于 */transform: translate(var(--positionX), 0);
}/* 只沿 y 轴移动元素*/
.element {transform: translateY(var(--positionY));/* 等同于 */transform: translate(0, var(--positionY));
}

缩放函数 scale()

scale() 函数的值为 1 时，元素将保持原样不变，既不放大，也不缩小

scale() 函数的值为 0 时，元素将缩小到不可见

scale() 函数的值大于 1 时，元素将会放大

scale() 函数的值小于 1 时，元素将会缩小

scale() 函数可以被视为 scaleX() 和 scaleY() 的简写函数

scaleX() 函数：用于指定元素在水平方向上的缩放倍数，而垂直方向保持不变

scaleY() 函数：用于指定元素在垂直方向上的缩放倍数，而水平方向保持不变

注意：当 scale() 函数传递两个值时，只要其中有一个值为 0 ，元素都会被缩小到不可见。另外，当两个值相同时，第二个参数值（y 轴）可以省略不写。

scale3d() 函数允许同时指定三个方向（x、y 和 z）上的缩放倍数，用于三维变换。

x：表示水平方向的缩放倍数。
y：表示垂直方向的缩放倍数。

z：表示在Z轴上的缩放倍数。

电视开关动画实例:

@layer animation {@keyframes closeTV {from {transform: scale(1, 1);filter: brightness(100%);}to {transform: scale(0.5, 0);filter: brightness(800%);}}.switch:has(:checked) ~ .video > video {animation: closeTV 0.28s ease-out both;}
}

旋转函数 rotate()

rotateX() 函数：元素绕 x 轴进行 3D 旋转
rotateY() 函数：元素绕 y 轴进行 3D 旋转
rotateZ() 函数：元素绕 z 轴进行 3D 旋转
rotate3d() 函数：元素在三维空间中绕指定轴进行旋转

如果 rotate() 函数使用正角度值，则元素进行顺时针旋转；反之元素进行逆时针旋转。

rotate() 函数的值除了正负角度值之外，你还可以使用其他描述角度值的单位，比如：

角度值（ deg ）：一个完整的圆是 360deg
梯度值（ grad ）：一个完整的圆是 400grad
弧度值（ rad ）：一个完整的圆是 2π 弧度
圈（ turn ）：一个完整的圆是 1turn

1 度（deg） = 1.11111 梯度（grad）
1 度（deg） = π ÷ 180 弧度（rad）
1 圈（turn） = 360 度（deg）

rotateZ() 和 rotate() 的视觉效果上是一样的

两个 3D 变换函数，可以由单个轴的变换函数组合而成，即：

translate3d(tx, ty, tz) = translateX(tx) translateY(ty) translateZ(tz)
scale3d(sx, sy, sz) = scaleX(sx) scaleY(sy) scaleZ(sz)

倾斜函数 skew()

skew()通过沿水平方向 x 轴和（或）垂直方向 y 轴倾斜元素来扭曲元素，从而呈现出倾斜的外观：

skew() ：接受两个参数，第一个是水平方向倾斜元素的角度，第二个是垂直方向倾斜元素的角度，如果第二个参数省略不写，将表示垂直方向不做任何角度的倾斜，即为 0。
skewX() ：使元素沿着水平方向按指定的角度倾斜元素
skewY() ：使元素沿着垂直方向按指定的角度倾斜元素