[分享]css中2d变换

CSS中的2D变换指的是在2D平面内进行的元素的变形。它可以帮助我们创建独特的效果，使得我们的网页更加生动、有趣。transform: translate(x,y); / 平移 / transform...

CSS中的2D变换指的是在2D平面内进行的元素的变形。它可以帮助我们创建独特的效果，使得我们的网页更加生动、有趣。

transform: translate(x,y); /* 平移 */
transform: rotate(angle); /* 旋转 */
transform: scale(x,y); /* 缩放 */
transform: skew(x-angle,y-angle); /* 倾斜 */
transform-origin: x y; /* 旋转和缩放的中心点 */ 

transform属性下有几种常用的变换方式，如平移、旋转、缩放、倾斜等。其中，translate可以帮助我们将元素沿x方向和y方向进行移动，其值可以为px或百分比。例如：

div {
  transform: translate(50px, 20%);
} 

上述代码将元素向右移动了50像素，并向下移动了元素高度的20%。

而rotate可以让元素进行旋转，angle指旋转的角度，可以为正值或负值。例如：

div {
  transform: rotate(45deg);
} 

上述代码将元素以中心点为基准旋转了45度。

缩放可以让元素在x轴和y轴方向缩放，x和y的值分别表示x轴方向和y轴方向的缩放比例。例如：

div {
  transform: scale(2, 0.5);
} 

上述代码将元素在x轴方向放大了2倍，在y轴方向缩小了一半。

倾斜可以让元素在x轴方向和y轴方向倾斜，倾斜的角度也可以为正值或负值。例如：

div {
  transform: skew(30deg, 0);
} 

上述代码将元素在x轴方向倾斜了30度。

transform-origin可以用于设置元素的变换的中心点，它的值可以为像素值或百分比值。例如：

div {
  transform-origin: 50% 50%;
} 

上述代码将元素的旋转和缩放的中心点设置为元素中心点。

通过CSS中的2D变形，我们可以让元素变得更加生动、有趣，提高用户的浏览体验。