重拾CSS，前端样式精读-函数（变换-transform）
重拾CSS，前端样式精读-函数（变换-transform）
前言
本文收录于CSS 系列文章中[1]，欢迎阅读指正
CSS 的变换属性（transform）通过修改视觉格式化模型的坐标空间可以实现给定标签的旋转，缩放，倾斜或平移效果。transform 通常会和动画属性搭配，实现标签的缓动变化效果，本篇文章可能会比之前的文章有意思，感兴趣的话就接着往下看吧。
参照元素
为了观察元素的 3d 效果，我们需要实现一个正方体
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS变换函数</title>
<style>
ul {
list-style: none;
}
.box {
transform-style: preserve-3d;
margin: 0px auto 150px;
height: 300px;
width: 300px;
perspective: 1000px;
transition: 1s;
}
.box li {
display: block;
position: absolute;
width: 200px;
height: 200px;
border: none;
line-height: 200px;
font-size: 60px;
color: white;
text-align: center;
}
.front {
background: rgba(0, 0, 0, .5);
transform: translateZ(100px);
}
.back {
background: rgba(0, 255, 0, .5);
color: black;
transform: rotateY(180deg) translateZ(100px);
}
.right {
background: rgba(196, 0, 0, .5);
transform: rotateY(90deg) translateZ(100px);
}
.left {
background: rgba(0, 0, 196, .5);
transform: rotateY(-90deg) translateZ(100px);
}
.top {
background: rgba(196, 196, 0, .5);
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
background: rgba(196, 0, 196, .5);
transform: rotateX(-90deg) translateZ(100px);
}
.default {
perspective: 1000px;
}
</style>
</head>
<body>
<ul id="box" class="box default">
<li class="front">1</li>
<li class="back">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="top">5</li>
<li class="bottom">6</li>
</ul>
</body>
</html>
后续将围绕这个正方体进行变换操作
创建 3D 场景及视角
Z 轴的一些操作不会在 2D 屏幕上显示任何变化，添加一个容器更换视角看的更直观
<section class="out-box">
<ul id="box" class="box default">
<li class="front">1</li>
<li class="back">2</li>
<li class="right">3</li>
<li class="left">4</li>
<li class="top">5</li>
<li class="bottom">6</li>
</ul>
</section>
.out-box {
background: linear-gradient(lightblue, lightgreen);
perspective: 1200px;
perspective-origin: 20% 20%;
padding-top: 150px;
}
perspective
定义一个 3D 元素的视角。传入一个参数：perspective([">
.perspective {
/* perspective: 300px; */
transform: perspective(300px);
}
rotate
旋转元素。传入一个参数：rotate([">
.rotate {
transform: rotate(90deg);
/* 相当于rotateZ(90deg) */
}
rotate3d
围绕一个由 3D 坐标定义的轴旋转元素。传入四个参数：rotate3d(rx, ry, rz,[">
.rotate3d {
transform: rotate3d(1, 1, 1, 45deg);
}
当 rx, ry, rz 的值不在-1 到 1 区间
说个题外话，关于 rx, ry, rz 规范化转换原理有以下概念：这三个分量通常是介于-1 到 1 之间的数值，如果(rx, ry, rz)不是单位向量，也就是说它们的平方和的平方根不等于 1，那么 CSS 会将其规范化为单位向量。来说说这个规范化操作，标准化操作是一个数学过程：将原向量的每一个分量除以向量的长度（根号下(rx^2+ry^2+rz^2)）
transform: rotate3d(2, 1, 1, 45deg);
当我们输入上述向量值时，浏览器会先求它的长度（高中向量中的模）这里是根号(2^2+1^2+1^2)
等于根号 6，然后再使用 2,1,1 分别除以根号 6
求向量长度最后可以得到上述代码实际上约等于
transform: rotate3d(0.8165, 0.4082, 0.4082, 45deg);
rotateX
围绕 X 轴旋转元素。传入一个参数：rotateX([">
.rotateX {
transform: rotateX(45deg);
}
rotateY
围绕 Y 轴旋转元素。传入一个参数：rotateY([">
.rotateY {
transform: rotateY(45deg);
}
rotateZ
围绕 Z 轴旋转元素。传入一个参数：rotateZ([">
.rotateZ {
transform: rotateZ(45deg);
}
scale
缩放元素。传入一个或两个参数：scale(sx[, sy])；x 和 y 类型是[">
.scale {
transform: scale(2);
/* 双倍大小 */
}
scale3d
在 3D 空间中缩放元素。传入三个参数：scale3d(sx, sy, sz)，参数类型同 scale，其中 sx、sy、和 sz 分别定义沿着 X 轴、Y 轴和 Z 轴的缩放因子。
.scale3d {
transform: scale3d(0.5, 2, 3);
}
scaleX
只在 X 轴上缩放元素。传入一个参数：scaleX(sx) 其中 sx 是水平方向的缩放因子，参数类型同 scale，scaleX(sx)等同于 scale(sx, 1)或 scale3d(sx, 1, 1)
.scaleX {
transform: scaleX(0.5);
/* 宽度缩小到原来的一半 */
}
scaleY
只在 Y 轴上缩放元素。传入一个参数：scaleY(sy)，其中 sy 是垂直方向的缩放因子。参数类型同 scale，scaleY(sy)等于 scale(1, sy)或 scale3d(1, sy, 1)
.scaleY {
transform: scaleY(2);
/* 高度放大到原来的两倍 */
}
scaleZ
只在 Z 轴上缩放元素。传入一个参数：scaleZ(sz)其中 sz 是深度方向的缩放因子。参数类型同 scale，scaleZ(sz)相当于 scale3d(1, 1, sz)
.scaleZ {
transform: scaleZ(3);
}
skew
倾斜元素。传入一个或两个参数：skew(ax[, ay]) 其中 ax 是水平方向的倾斜角度，ay 是垂直方向的倾斜角度，参数类型都是[">
.skew {
transform: skew(30deg, 20deg);
}
skewX
只在 X 轴方向倾斜元素。传入一个参数：skewX(ax)其中 ax 是水平方向的倾斜角度，参数类型同 skew，skewX(a)相当于 skew(a)
.skewX {
transform: skewX(30deg);
}
skewY
只在 Y 轴方向倾斜元素。传入一个参数：skewY(ay)其中 ay 是垂直方向的倾斜角度，参数类型同 skew。
.skewY {
transform: skewY(20deg);
}
translate
移动元素位置。传入一个或两个参数：translate(tx[, ty])其中 tx 是水平方向的移动值，ty 是垂直方向的移动值，参数类型是[">
.translate {
transform: translate(50px, 100px);
/* 向右移动50px，向下移动100px */
}
translate3d
在 3D 空间中移动元素位置。传入三个参数：translate3d(tx, ty, tz)，参数类型同 translate，其中 tx、ty、和 tz 分别定义了沿着 X 轴、Y 轴和 Z 轴的移动值。
.translate3d {
transform: translate3d(50px, -100px, -200px);
}
translateX
只在 X 轴方向移动元素位置。传入一个参数：translateX(tx)其中 tx 是水平方向的移动值，类型同 translate。translateX(tx)等同于 translate(tx, 0)或者 translate3d(tx, 0, 0)。
.translateX {
transform: translateX(100px);
/* 向右移动100px */
}
translateY
只在 Y 轴方向移动元素位置。传入一个参数：translateY(ty)其中 ty 是垂直方向的移动值，类型同 translate。translateY(ty)对应 translate(0,ty)或 translate3d(0,ty,0)。
.translateY {
transform: translateY(150px);
/* 向下移动150px */
}
translateZ
在 Z 轴方向上移动元素位置。传入一个参数：translateZ(tz),其中 tz 是深度方向的移动值，类型同 translate。translateZ(tz)等于 translate3d(0, 0, tz)
.translateZ {
transform: translateZ(300px);
}
matrix
应用 2D 转换矩阵到元素。该转换不透明且可以执行任何线性变换。传入六个参数：matrix(scaleX, skewY, skewX, scaleY, translateX, translateY)，参数类型是[">
.matrix {
transform: matrix(.5, .1, .3, .5, -100, -100);
}
matrix3d
matrix3d()以 4x4 齐次矩阵的形式定义一个 3D 转换。传入十六个参数：matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)，类型为[">
下面的代码表示元素无任何变化的参数
transform: matrix3d(1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1);
以下参数实现 perspective、rotateX、rotateY、rotateZ、scaleX、scaleY、scaleZ、translateX、translateY、和 translateZ 的复合变换效果
transform: matrix3d(0.866, 0.5, 0, 0,
-0.5, 0.866, 0, 0,
0, 0, 1.5, 0,
100, 200, 50, 1);
由于 matrix3d()使用门槛较高，需要一定的线代知识，这里不多赘述。参考matrix3d() - CSS：层叠样式表 | MDN[2]
总结
本文详细介绍了 transform 函数的用法及说明，通过 transform 函数可以进行元素变换的属性，它可以包含多个变换函数，按照顺序逐一应用于元素。这些函数包括平移(translate、translateX、translateY、translate3d)、缩放(scale、scaleX、scaleY、scale3d)、旋转(rotate、rotateX、rotateY、rotateZ、rotate3d)、倾斜(skew、skewX、skewY)、以及透视(perspective)等。通过适当组合这些函数，可以实现各种二维和三维的变换效果。
以上就是文章全部内容，感谢你看到了最后，如果觉得本篇文章或者这个系列写的不错，还望三连支持一下，你的支持就是我创作的动力，谢谢！
相关代码
myCode: 基于 js 的一些小案例或者项目 - Gitee.com[3]
参考
transform - CSS：层叠样式表 | MDN[4]
使用 CSS 变换 - CSS：层叠样式表 | MDN[5]
transform-function - CSS：层叠样式表 | MDN[6]
参考资料
CSS系列文章中: https://blog.csdn.net/time_____/category_12574101.html
[2]matrix3d() - CSS：层叠样式表 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/matrix3d
[3]myCode: 基于js的一些小案例或者项目 - Gitee.com: https://gitee.com/DieHunter/myCode/tree/master/css%E7%9F%A5%E8%AF%86%E7%82%B9/%E5%87%BD%E6%95%B0/%E5%8F%98%E6%8D%A2
[4]transform - CSS：层叠样式表 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
[5]使用 CSS 变换 - CSS：层叠样式表 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_transforms/Using_CSS_transforms
[6]transform-function - CSS：层叠样式表 | MDN: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function