CSS 中的 2D 变换函数-猿码集

1. 什么是2D变换

在CSS中，2D变换是指将元素沿着平面内的二维坐标系进行变换，通过对元素的平移、旋转、缩放和倾斜等操作，来实现不同形态的布局和效果。2D变换可以为元素带来各种奇妙的效果，例如图像旋转、3D翻转、缩放和平移等。此外，2D变换可用于解决HTML和CSS排版的一些问题。

1.1 2D变换的基本属性

2D变换包括四种基本属性：平移（translate）、缩放（scale）、旋转（rotate）和倾斜（skew）。以下分别对它们进行介绍。

1.1.1 translate

translate()函数能够帮助元素在平面内水平和垂直方向上进行移动。它接受两个参数，第一个参数表示水平偏移量，第二个参数表示垂直偏移量。


/* 将元素向右平移20px，向下平移10px */
div {
  transform: translate(20px, 10px);
}

1.1.2 scale

scale()函数能够改变元素的尺寸大小，它接受两个参数，一个是水平方向上的缩放比例，另一个是垂直方向上的缩放比例。若缩放比例小于1，则元素会被缩小；若缩放比例大于1，则元素会被放大。


/* 改变元素的尺寸，将元素宽度缩放为原来的一半，高度缩放为原来的1.5倍 */
div {
  transform: scale(0.5, 1.5);
}

1.1.3 rotate

rotate()函数用于元素的旋转，它接受一个参数表示旋转的角度。它的旋转方向是顺时针方向。


/* 将元素旋转45度 */
div {
  transform: rotate(45deg);
}

1.1.4 skew

skew()函数用于元素的倾斜，它接受两个参数表示水平方向和垂直方向的倾斜角度。


/* 将元素水平方向上倾斜30度，垂直方向上倾斜15度 */
div {
  transform: skew(30deg, 15deg);
}

1.2 变换函数的组合

与CSS中的其它属性一样，变换函数也可以进行组合，以实现多种复杂的效果。例如，假设有一个元素需要将左上角平移到页面中心，并绕中心点顺时针旋转45度，代码如下：


/* 将元素向右平移20px，向下平移10px，然后旋转45度 */
div {
  transform: translate(20px, 10px) rotate(45deg);
}

2. 实例展示

2.1 图片旋转

图片旋转是2D变换中比较常见的应用之一。下面代码实现了一个图片在悬停时沿Z轴旋转的效果：


img:hover {
  transform: rotateZ(30deg);
  transition: all ease 0.5s;
}

2.2 卡片翻转

卡片翻转是3D效果中的经典案例，在2D变换中也能够实现类似的效果。下面代码实现了一个卡片在翻转时的效果：


.card {
  /* 容器设置perspective属性，实现3D效果 */
  perspective: 1000px;
  transition: transform 1s;
}
.card:hover .card-content {
  /* 反转卡片和内容 */
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.card-content {
  /* 活动面 */
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card-content-back {
  /* 卡片背面 */
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 1s;
}

2.3 图像缩放

下面代码实现了一个图像在悬停时缩放的效果：


img:hover {
  transform: scale(1.2);
  transition: transform 0.3s;
}

3. 总结

2D变换在CSS中扮演着重要的角色，通过使用translate、scale、rotate和skew等函数，可以在平面内实现各种非常棒的效果。由于2D变换具有发散性和叠加性，因此我们可以使用组合变换，以实现更加复杂的效果。最后，需要注意的是，在2D变换中的每个函数都需要在transform属性下进行定义。

CSS 中的 2D 变换函数