17 / 20

变换 | 自在学

变换

在网页设计的世界里，元素通常被限制在平面的矩形框中，只能沿着水平和垂直方向移动。但CSS变换改变了这一切，它让我们能够打破这个视觉限制，让元素可以在二维甚至三维空间中自由变换。想象一下，一个原本静态的卡片突然可以翻转、缩放或者倾斜，这不仅增添了视觉趣味，更能创造出丰富的交互体验。

实验室

坐标系

要理解CSS变换，首先需要认识坐标系统。这个系统就像是给元素定位的地图，定义了元素在空间中的位置和移动方向。在CSS变换中，我们主要使用笛卡尔坐标系统，也就是大家熟悉的x、y、z轴系统。在这个系统中，x轴代表水平方向，y轴代表垂直方向，而z轴则引入了深度维度。正如我们在数学课上学到的，x轴的正方向指向右侧，负方向指向左侧；y轴的正方向指向下方，负方向指向上方；而z轴的正方向指向观察者，也就是说正值让元素显得更靠近我们。

这种坐标系统的设定初看起来有点反直觉，因为在很多图形软件中y轴的正方向通常向上。但在CSS中，这种约定与网页布局的流动方向保持一致。

举个例子，假设我们要让一个元素向右下方移动，我们可以这样写：

|
.transform-element {
  transform: translateX(50px) translateY(30px);
}

这段代码的意思是，元素沿着x轴向右移动50像素，同时沿着y轴向下移动30像素。最终效果就像元素在页面上轻轻滑动到了新的位置。如果引入三维空间，z轴的变换会让元素产生前后移动的效果：

|
.transform-element {
  transform: translateZ(100px);
}

虽然在二维屏幕上我们看不到真正的深度变化，但这种变换可以与其他变换结合，创造出更丰富的视觉效果。

除了笛卡尔坐标系统，CSS变换还使用球坐标系统来描述旋转。在球坐标系统中，我们通过角度来定义旋转的方向和幅度。比如，绕x轴旋转让元素像门一样开启或关闭，绕y轴旋转则让元素从侧面转身，而绕z轴旋转就是大家熟悉的平面旋转。

transform属性

CSS变换的核心是transform属性。这个属性就像是一个强大的指挥家，可以对元素应用各种变换操作。transform属性的值是一系列变换函数的组合，每个函数都精确控制着元素的外观变化。

变换函数按照从左到右的顺序依次应用，这意味着函数的顺序会显著影响最终结果。想象一下，我们先旋转一个元素再移动它，与先移动再旋转会产生完全不同的视觉效果。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .card {
      width: 200px;
      height: 150px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%

在第一个例子中，我们先让卡片旋转45度，然后再向右移动100像素。旋转后的卡片沿着自己的坐标轴移动，所以最终位置偏离了原始移动方向。在第二个例子中，我们先向右移动100像素，然后再旋转45度，卡片沿着原始坐标轴移动后再旋转。

变换函数必须全部有效，如果其中任何一个函数格式错误，整个transform属性都会失效。这提醒我们在编写变换代码时要特别小心，确保每个函数的语法都正确。

平移变换

平移变换是CSS变换中最基础也最直观的一种。它让元素能够在二维或三维空间中自由移动，就像在页面上拖拽元素一样。CSS提供了多种平移函数，每种都有其独特的应用场景。

二维平移：translateX() 和 translateY()

这两个函数专门用于在平面上移动元素。translateX() 让元素沿着水平方向移动，正值向右，负值向左；而translateY() 则控制垂直方向的移动，正值向下，负值向上。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      width: 400px;
      height: 300px;
      border: 2px solid #ddd;
      margin: 20

当鼠标悬停在方块上时，它会向右移动50像素并向上移动30像素。这种交互效果常常用于创建微妙的动画，让用户感受到元素的动态变化。

百分比平移

平移函数不仅接受像素值，还可以使用百分比。百分比是相对于元素自身尺寸计算的，这让变换更加灵活和响应式。

|
.element {
  transform: translateX(50%) translateY(-25%);
}

对于一个宽度为200像素、高度为100像素的元素来说，translateX(50%) 会让它向右移动100像素，而translateY(-25%) 则会让它向上移动25像素。这种基于自身尺寸的移动方式在创建响应式布局时特别有用。

三维空间的延伸：translateZ()

当我们进入三维世界时，translateZ() 函数为元素增添了深度维度。正值让元素显得更靠近观察者，负值则让它显得更远。虽然在二维屏幕上我们无法直接看到深度变化，但这个函数与其他三维变换结合时会产生显著的透视效果。

便捷的组合函数

如果需要同时在x和y方向上移动元素，translate() 函数提供了更简洁的语法。它接受两个参数，第一个控制x轴移动，第二个控制y轴移动。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 20px;
    }

在这个照片网格示例中，每个照片卡片在悬停时都会向不同方向移动，创造出一种动态的交互效果。这种细微的动画可以让用户界面更加生动有趣。

缩放变换

缩放变换让元素能够在保持比例的情况下改变大小。从让元素变大突出重要内容，到创建微缩模型，缩放变换在现代网页设计中应用广泛。

基础缩放函数

scaleX()、scaleY() 和 scaleZ() 函数分别控制元素在不同轴上的缩放比例。这些函数接受一个数字值，表示缩放倍数。大于1的值让元素放大，小于1的值让元素缩小。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .scale-demo {
      display: flex;
      gap: 30px;
      padding: 40px;
      justify-content: center;
    }
    .item {
      width:

第一个元素在悬停时水平方向放大到1.5倍，第二个元素垂直方向缩小到0.7倍，而第三个元素展示了复合缩放的效果。这种灵活的缩放方式让设计师能够创造出各种有趣的视觉效果。

当需要在两个维度上同时缩放时，scale() 函数提供了简洁的语法。它可以接受一个参数应用到两个轴上，也可以接受两个参数分别控制x轴和y轴。

|
/* 同时缩放x和y轴 */
.element {
  transform: scale(1.2);
}
 
/* 分别控制x和y轴 */
.element {
  transform: scale(1.5, 0.8);
}

百分比值也可以用于缩放函数，50%相当于0.5，200%相当于2.0。这种灵活性让缩放变换在响应式设计中特别有用。

需要注意的是，缩放变换会影响后续变换的计算方式。例如，在缩放元素后再进行平移时，平移距离会基于缩放后的尺寸计算。

旋转

旋转变换让元素能够在二维或三维空间中改变方向。从简单的平面旋转到复杂的空间翻转，旋转为网页增添了丰富的动态效果。CSS提供了多种旋转函数，每种都针对不同的旋转需求。

基础的平面旋转

rotate() 函数是使用最广泛的旋转函数，它让元素在xy平面上进行旋转。正值顺时针旋转，负值逆时针旋转。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .rotation-gallery {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      padding: 30px;
    }

这个旋转画廊通过对每个卡片元素应用不同角度的CSS 2D旋转（rotate）变换，直观演示了transform属性中rotate函数的实际效果。当用户将鼠标悬停在卡片上时，对应的:nth-child伪类选择器为该卡片添加指定的旋转角度（正值顺时针，负值逆时针），并结合平滑的transition动画，使旋转过渡更加自然

三维空间的旋转

当我们进入三维世界时，CSS 提供了 rotateX()、rotateY() 和 rotateZ() 这三个函数，分别对应绕 x 轴、y 轴和 z 轴的旋转操作。

rotateX(角度)：使元素围绕其 x 轴（水平轴）进行旋转，产生如“门向前或向后开启”的立体效果，顶部和底部会有透视变化。广泛用于卡片翻转、页面过渡等效果。
rotateY(角度)：使元素围绕其 y 轴（垂直轴）旋转，类似于“门绕垂直轴旋转”，能让元素从侧面呈现，常用于侧滑切换、3D 旋转木马等交互。
rotateZ(角度)：则与二维旋转功能相同，让元素围绕 z 轴（垂直于屏幕的轴）旋转，即常规的平面旋转，这也是我们在二维 transform 中最常用的旋转方式。

值得注意的是，三维旋转的视觉效果依赖于容器是否设置了 perspective（视距），只有在构建 3D 场景时，透视投影才能展现出前后远近的真实感。此外，三维旋转也支持与其它变换组合，实现更加丰富和复杂的动画表现。

例如，rotateX(30deg) 会让元素围绕水平轴向后“仰起”，rotateY(45deg) 会让元素像转向侧面那样斜呈 45°，而 rotateZ(60deg) 则是在平面上顺时针转 60°。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .perspective-container {
      perspective: 1000px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      padding

这个三维旋转演示展示了三个不同轴向的旋转效果。第一个卡片绕x轴旋转就像书本打开，第二个卡片绕y轴旋转就像从侧面转身，而第三个卡片绕z轴旋转就是普通的平面旋转。

rotate3d() 函数为开发者提供了精确控制三维旋转的能力。它使用四个参数：前三个定义旋转轴的向量，第四个定义旋转角度。

|
.element {
  transform: rotate3d(1, 1, 0, 45deg);
}

这个例子定义了一个从左上角到右下角的对角线旋转轴，元素会绕这个轴旋转45度。向量的三个数字(1, 1, 0)表示x、y、z轴的权重，形成了旋转的轴线。

旋转角度可以使用多种单位，包括度(deg)、弧度(rad)、梯度(grad)和圈数(turn)。例如，90deg、1.57rad、100grad和0.25turn都表示90度的旋转。

动画旋转是旋转变换的一个重要应用场景。当元素在不同角度之间过渡时，会产生平滑的旋转动画效果。这种技术在现代网页设计中被广泛用于创建交互式界面和视觉反馈。悬停、点击或页面滚动时触发的旋转动画，可以为用户提供直观的交互体验。关键是通过精心控制旋转的角度和速度，创造出自然流畅的视觉变换。CSS的transform属性让这些复杂的动画变得简单而高效。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .loading-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid #f3f3f3;
      border-top: 4px solid #667eea;

这个示例展示了旋转变换在实际项目中的两个经典应用：加载动画和卡片翻转效果。加载动画通过连续的旋转创造出动态感，而卡片翻转则展示了三维旋转如何创造丰富的交互体验。

倾斜 —— skew变换

skew（倾斜）变换是一种CSS 2D变形，将元素在平面坐标系内按指定角度沿x轴、y轴或二者同时扭曲，模拟出类似于平面透视、斜切的视觉效果。本质上，skew会对元素所有角的坐标按指定轴线进行了角度变换，使图形仿佛被“剪切”或“拉伸”了一样。与rotate（旋转）、translate（平移）不同，skew主要用来营造动感、速度感或特殊装饰性的扭曲外观（如仿3D按钮、动态卡片、投影等）。

在专业界面和品牌设计中，skew常用于制造醒目标题、卡片、按钮的斜切边缘效果，此外也常搭配动画实现炫酷的折纸、切片等交互动效。由于skew会影响整块元素及其内容（包括文本、图片等），合理的排版和内容对齐尤为关键，否则文字可能出现视觉畸变、可读性降低。

基础的倾斜函数

skew相关的CSS函数包括 skewX(<angle>) 和 skewY(<angle>)，分别定义元素在水平方向（x轴）和垂直方向（y轴）的倾斜角度。参数为角度值，可用deg、rad等单位。skewX(正值) 会使元素上侧向右倾斜，下侧保持不变；skewY(正值) 则让元素右侧向下倾斜，左侧保持不动。负值则朝相反方向倾斜。对于同时需要x轴和y轴倾斜，可直接用 skew(<angle-x>, <angle-y>) 或者组合使用 skewX/skewY 实现复合变形。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .skew-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      padding: 40px;
    }

这个倾斜画廊展示了不同类型的skew变换效果。第一个元素水平倾斜，第二个垂直倾斜，第三个展示了复合倾斜的复杂效果。这些变换可以创造出独特的视觉风格，特别是在设计艺术化界面时。

skew变换与rotate变换的不同之处在于，skew是拉伸和压缩元素来创造倾斜效果，而rotate是围绕一个点旋转元素。这两种变换可以结合使用来创造更复杂的视觉效果。

矩阵变换

矩阵变换（Matrix Transform）是CSS变换（transform）体系中最底层、也是功能最全面的方式。通过矩阵变换，你可以以高度专业且精细化的方式，将多个基础变换（如平移、缩放、旋转、倾斜等）整合为一次性完成的复合操作。其他所有的CSS 2D变换（例如 translate、scale、rotate、skew 等）在渲染时最终都会被转换成矩阵形式进行计算，这意味着 matrix() 函数可以实现它们以及它们的任意组合，甚至可以实现某些基础变换难以描述的复杂变换。

从数学原理来看，2D矩阵变换采用的是线性代数中的仿射变换矩阵，其一般形式如下：

|
| a  c  e |
| b  d  f |
| 0  0  1 |

CSS中的 matrix(a, b, c, d, e, f) 基本上将上述3x3矩阵的6个参数进行了展开，分别控制了变换的各个方面。

基础矩阵变换

matrix() 函数需要6个参数，对应仿射矩阵的项目顺序如下：

a (scaleX)：水平方向（x轴）的缩放因子
b (skewY)：y轴方向的倾斜系数（skewY）
c (skewX)：x轴方向的倾斜系数（skewX）
d (scaleY)：垂直方向（y轴）的缩放因子
e (translateX)：x轴方向的平移距离（以像素为单位）
f (translateY)：y轴方向的平移距离（以像素为单位）

通俗地说，matrix() 提供了一个底层通道，让开发者能够精准地控制和组合任何线性2D变换效果。专业场景下，比如动画库、图形处理、地图组件等底层渲染，经常用矩阵运算来获得高性能和准确的视觉控制。请注意，除了直接手写6个参数，还可以利用开发工具或者第三方矩阵库进行可视化编辑和运算以避免数值混乱。例如：

|
.element {
  transform: matrix(1, 0, 0, 1, 100, 50);
}

这个例子表示不进行缩放和倾斜，只在x方向平移100px，在y方向平移50px，相当于 transform: translate(100px, 50px)。

如果将所有参数组合起来，例如 matrix(0.5, 0.3, 0.1, 1.2, 60, 20)，则会同时产生缩放、倾斜和平移的复杂效果。这种方式适用于高阶动画和精确的视觉控制。

|
.element {
  transform: matrix(1, 0, 0, 1, 100, 50);
}

这六个数字分别代表：

第一个数字：x轴方向的缩放
第二个数字：x轴方向的倾斜
第三个数字：y轴方向的倾斜
第四个数字：y轴方向的缩放
第五个数字：x轴方向的平移
第六个数字：y轴方向的平移

透视效果的创造

在实现三维视觉效果时，perspective() 函数是 CSS Transform 中引入真实空间深度感的关键工具。perspective 并非直接作用于元素本身，而是决定了浏览者视线与z=0平面的距离（单位为px），即三维场景的“视点”前后远近。其核心作用是为嵌套的三维变换（如 rotateX、rotateY 等）创建透视投影，使靠近观众的部分看起来更大、远离观众的部分显得更小，从而模拟摄影机或真实人眼观察立体空间的效果。
数值越小，透视感越强烈（空间收缩更夸张），距离越大，场景变化趋近平面化，三维效果变弱。通过合理设置 perspective，可以显著提升卡片翻转、3D轮播、立体面板等交互动画的真实感和沉浸感。通常，perspective 可定义在父容器上（作为透视环境），也可单独作为变换函数用在 transform 属性中，但推荐优先在容器级别进行统一控制以获得更自然的空间统一性。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .perspective-demo {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      padding: 40px;
    }

这个示例展示了不同透视距离的效果。距离越近（数值越小），透视效果越明显，元素看起来变形越大；距离越远，效果越微妙。

透视变换需要与其他三维变换函数结合使用才能看到效果。单独使用perspective()函数则不会产生任何视觉变化。

变换的控制中心

在CSS的变换体系中，除了常用的transform系列函数（如translate、scale、rotate等），还存在一组关键的控制属性，它们用于精准调控变换效果的参考点、三维保真度以及视觉表现，从而满足高级的交互与动画需求。这些辅助属性通常决定了变换如何发生、发生在何处、以及变换后子元素和背面的可视性，对于构建复杂动效、3D场景尤为重要。

变换原点（transform-origin）

transform-origin 属性决定了元素在执行变换（如旋转、缩放、倾斜等）时的参考点或“支点”，即这个点是变换操作的中心。其默认值为元素自身的中心点（50% 50%），但可以通过指定关键字（如top、left）、百分比或具体长度（如px、em）来精细调整支点位置。这个支点不仅可以设定在常见的四角、边缘，还可以设在任何任意位置，甚至可以是元素外部（通过超出100%或负值）。

例如：

设置为top left可让旋转绕左上角执行，常见于抽屉、菜单等展开动效。
指定为100% 100%（即右下角）可用于旋转表盘指针、风车等场景。
对于三维变换，还能接受第三个z轴参数，实现更立体的视觉支点调整，例如transform-origin: 50% 50% -100px;让元素绕距自身中心点向外100px的空间点旋转。

变换原点对于动画设计、性能优化和交互可控性有重要意义。在复杂布局中，正确的origin设定甚至决定了整体动画的美观性和可控性。

示例：

|
.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

上述代码使元素以自身左上角为旋转中心旋转45度，而非默认的几何中心，实现更加贴合设计需求的变换效果。

|
.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

这个例子让元素绕其左上角旋转，而不是默认的中心点。

三维样式控制

transform-style 属性控制子元素是否参与三维变换：

|
.parent {
  transform-style: preserve-3d;
}

transform-style 属性决定了其子元素在应用三维变换时的空间呈现方式。取值包括：

preserve-3d：使得子元素保持在父元素三维空间中的原始相对布局。当父元素本身发生三维变换（如 rotateX、rotateY 等）时，其所有已应用 transform 的子元素也会保留各自的三维位移与旋转效果。例如，用于实现 3D 立方体、翻转卡片等复合空间结构。开发 3D UI、立方体、复杂层叠场景时必须使用此值。
flat（默认值）：所有子元素会被"压平"到父元素的二维平面上，无论它们自身是否有三维变换，最终都会合成为父元素当前的二维变换层。这样会丧失三维层级感，只能产生普通的 2D 变换视觉。

例如：如果父元素使用 transform-style: preserve-3d，并对子元素分别执行 rotateY(90deg)、translateZ(100px) 等操作，那么这些子元素会表现出各自独立的三维空间关系，被投射到最终的 3D 场景中。而如果是 flat，则所有三维效果都会被强制扁平化，无法表现出叠加的立体结构。

因此在构建三维场景、多层级空间动画（如立方体转动、三维走马灯等）时，务必为父容器指定 transform-style: preserve-3d，并同时为外层容器设置合适的 perspective 透视参数，以确保 3D 效果真实可信。

背面可见性

backface-visibility 属性是 CSS3 3D 变换中专门用于确定当元素经过三维空间旋转（例如通过 rotateY(180deg) 或 rotateX(180deg) 等）后，其背面（即元素正反面相对观察者发生反转时的那一面）是否对用户可见的高级渲染控制手段。

具体来说，当一个元素应用了 3D 旋转，而其背部正对观察者时：

如果 backface-visibility: visible;（默认值），元素的背面仍会被正常绘制和显示，这意味着你能看见翻转后的那一面——例如卡片翻转动画时不隐藏背部内容。
如果设置为 backface-visibility: hidden;，则当元素背面对向观察者时，整个元素会不可见，相当于“从空气中消失”，只能看到正面，这对于实现翻转卡片、三维立方体等效果时只显示当前正面的内容至关重要。

该属性在 3D 卡片翻转、立方体等多视图场景动画设计中极为常用，可以防止背面露出、图形“穿帮”等视觉不一致问题。从实现机制上，backface-visibility 会影响 GPU 如何合成该元素变换后的渲染结果，合理使用有助于提升界面的专业感及沉浸体验。

|
.card {
  backface-visibility: hidden;
}

这个属性在创建卡片翻转效果时特别有用，可以隐藏元素的背面。

|
<!DOCTYPE html>
<html>
<head>
  <style>
    .scene {
      width: 200px;
      height: 200px;
      perspective: 600px;
      margin: 50px auto;
    }
 
    .cube

这个三维立方体案例展示了CSS变换在实现视觉层次和动态效果方面的强大能力。通过灵活运用各种变换函数并将其叠加应用，我们可以构建出栩栩如生的三维图形和流畅的动画表现。

小结

CSS变换不仅仅用于美化页面，更是现代网页交互与动效设计的基础。无论是为按钮添加悬停动态，还是实现复杂的页面动效，合理利用变换能够有效提升界面的互动感和吸引力。

在应用变换功能时，应关注其实时性能表现。因为部分复杂或高频率的3d变换可能导致页面重新渲染，给浏览器带来负担，尤其是在移动终端设备上更需注意，过度运用会影响用户体验。

总体来说，CSS变换极大地丰富了前端开发者的设计工具箱，让我们能够打造更加生动、互动性更强的网页界面。通过持续练习与探索多样的变换组合，你将能为用户带来更具层次感和吸引力的视觉展示。

实战练习

练习1：基础变换函数

请写出以下CSS代码的最终效果，并解释每个变换函数的作用：

|
.box {
  transform: translateX(50px) scale(1.2) rotate(45deg);
}

元素会先向右移动50像素，然后放大到原来的1.2倍，最后绕中心点顺时针旋转45度。变换函数按照从左到右的顺序依次应用。

练习2：坐标系统理解

在CSS坐标系统中，x轴正方向是：

A. 向上
B. 向下
C. 向右
D. 向左

答案：C 向右

在CSS坐标系统中，x轴正方向指向右侧，y轴正方向指向下方。这种约定与网页布局的流动方向保持一致。

练习3：变换原点

如果要让一个元素绕其左上角旋转45度，应该如何设置transform-origin？

|
.element {
  transform-origin: top left;
  transform: rotate(45deg);
}

或者

|
.element {
  transform-origin: 0 0;
  transform: rotate(45deg);
}

练习4：三维变换

写出让元素在三维空间中绕y轴旋转30度的CSS代码：

|
.element {
  transform: rotateY(30deg);
}

为了看到三维效果，通常还需要设置透视：

|
.parent {
  perspective: 1000px;
}

练习5：复合变换

以下两个CSS规则，哪个会产生不同的视觉效果？为什么？

|
/* 规则A */
transform: rotate(30deg) translateX(100px);
 
/* 规则B */
transform: translateX(100px) rotate(30deg);

两个规则会产生完全不同的效果。

规则A (rotate(30deg) translateX(100px))：元素先旋转30度，然后沿着自身旋转后的坐标轴向右移动100像素。

规则B (translateX(100px) rotate(30deg))：元素先沿着原始坐标轴向右移动100像素，然后绕中心点旋转30度。

变换顺序会显著影响最终结果。

练习6：透视与三维变换

要创建真实的3D立方体效果，需要设置哪些关键属性？

需要设置以下关键属性：

perspective：为父容器设置透视距离
transform-style: preserve-3d：让子元素保持3D空间关系
backface-visibility: hidden：隐藏元素的背面（可选，用于卡片翻转效果）

示例代码：

|
.scene {
  perspective: 1000px;
}
 
.cube {
  transform-style: preserve-3d;
}
 
.face {
  backface-visibility: hidden;
}

练习7：缩放变换

写出让元素水平方向放大1.5倍、垂直方向缩小到0.8倍的CSS代码：

|
.element {
  transform: scaleX(1.5) scaleY(0.8);
}

或者使用复合缩放：

|
.element {
  transform: scale(1.5, 0.8);
}

练习8：倾斜变换

skewX(15deg) 和 skewY(15deg) 的区别是什么？

skewX(15deg)：让元素在水平方向倾斜，上侧向右倾斜，下侧保持不变，看起来像平行四边形
skewY(15deg)：让元素在垂直方向倾斜，右侧向下倾斜，左侧保持不变

skewX 影响水平方向的倾斜，skewY 影响垂直方向的倾斜。