<transform-function>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
语法
<transform-function>
数据类型使用下面列出的变换函数之一指定。每个函数在 2D 或 3D 中应用几何运算。
矩阵变换
matrix()
-
描述一个齐次二维变换矩阵。
matrix3d()
-
描述一个 3D 变换,作为 4×4 齐次矩阵。
透视
perspective()
-
设置用户和 z=0 平面之间的距离。
旋转
rotate()
-
绕二维平面上的固定点旋转元素。
rotate3d()
-
绕三维空间中的固定轴旋转元素。
rotateX()
-
绕水平轴旋转元素。
rotateY()
-
绕垂直轴旋转元素。
rotateZ()
-
绕 z 轴旋转元素。
缩放(调整大小)
倾斜(扭曲)
平移(移动)
translate()
-
在二维平面上平移元素。
translate3d()
-
在三维空间中平移元素。
translateX()
-
水平方向平移元素。
translateY()
-
垂直方向平移元素。
translateZ()
-
沿 z 轴平移元素。
描述
笛卡尔坐标
在笛卡尔坐标系中,二维点使用两个值来描述:x 坐标(横坐标)和 y 坐标(纵坐标)。这由向量符号 (x, y)
表示。
在 CSS(以及大多数计算机图形学中),原点 (0, 0)
代表任何元素的左上角。正坐标在原点的下方和右侧,而负坐标在原点的上方和左侧。因此,一个在右侧 2 个单位、下方 5 个单位的点是 (2, 5)
,而一个在左侧 3 个单位、上方 12 个单位的点是 (-3, -12)
。
变换函数
变换函数通过操纵元素坐标的值来改变元素的外观。线性变换函数使用 2×2 矩阵来描述,如下所示
该函数通过使用矩阵乘法应用于元素。因此,每个坐标根据矩阵中的值进行改变
甚至可以连续应用多个变换
使用这种表示法,可以描述(因此可以组合)大多数常见的变换:旋转、缩放或倾斜。(实际上,所有作为线性函数的变换都可以用这种表示法来描述。)组合变换的实际应用顺序是从右到左。
然而,有一种主要的变换不是线性的,因此在使用这种表示法时必须进行特殊处理:平移。平移向量 (tx, ty)
必须单独表示,作为两个额外的参数。
示例
变换函数比较
以下示例提供了一个从 DOM 元素和变换创建的 3D 立方体,以及一个选择菜单,允许您选择不同的变换函数来变换立方体,以便您可以比较不同类型的效果。
选择一个,变换就会应用到立方体上;2 秒后,立方体会恢复到初始状态。立方体的初始状态使用 transform3d()
稍微旋转,以便您可以看到所有变换的效果。
HTML
<main>
<section id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</section>
<div class="select-form">
<label for="transfunction">Select a transform function</label>
<select id="transfunction">
<option selected>Choose a function</option>
<option>rotate(360deg)</option>
<option>rotateX(360deg)</option>
<option>rotateY(360deg)</option>
<option>rotateZ(360deg)</option>
<option>rotate3d(1, 1, 1, 90deg)</option>
<option>scale(1.5)</option>
<option>scaleX(1.5)</option>
<option>scaleY(1.5)</option>
<option>scaleZ(1.5)</option>
<option>scale3d(1, 1.5, 1.5)</option>
<option>skew(17deg, 13deg)</option>
<option>skewX(17deg)</option>
<option>skewY(17deg)</option>
<option>translate(100px, 100px)</option>
<option>translateX(100px)</option>
<option>translateY(100px)</option>
<option>translateZ(100px)</option>
<option>translate3d(50px, 50px, 50px)</option>
<option>perspective(200px)</option>
<option>matrix(1, 2, -1, 1, 80, 80)</option>
<option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
</select>
</div>
</main>
CSS
main {
width: 400px;
height: 200px;
padding: 50px;
background-image: linear-gradient(135deg, white, cyan, white);
}
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
transition: transform 1.5s;
transform: rotate3d(1, 1, 1, 30deg);
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: #fff;
}
.front {
background: rgb(90 90 90 / 70%);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 70%);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 70%);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 70%);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 70%);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 70%);
transform: rotateX(-90deg) translateZ(50px);
}
.select-form {
margin-top: 50px;
}
JavaScript
const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");
selectElem.addEventListener("change", () => {
if (selectElem.value === "Choose a function") {
return;
} else {
example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
setTimeout(() => {
example.style.transform = "rotate3d(1, 1, 1, 30deg)";
}, 2000);
}
});
结果
规范
规范 |
---|
CSS 变换模块级别 1 # transform-functions |
CSS 变换模块级别 2 # transform-functions |
浏览器兼容性
BCD 表格仅在浏览器中加载