Skip to main content

CSS3 2D 3D 转换

一、2D转换​

1、translate(npx, npx)​

相对当前元素位置移动。

例子：实现 div 向右移动 20 个像素，并向下移动 20 个像素。

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

2、rotate(ndeg)​

相对当前角度旋转。

例子：实现 div 顺时针旋转 30°

div {
  transform: rotate(30deg);
}

3、scale(n, n)​

相对当前大小缩放。

例子：实现 div 宽度减半，高度增高 2 倍。

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

4、skew(ndeg, ndeg)​

相对当前角度透视倾斜。

例子：实现 div 在 X 轴和 Y 轴上分别倾斜 10 度和 20°

div {
  transform: skew(10deg, 20deg);
}

5、matrix(n, n, n, n, n, n)​

复合属性，六个参数分别包含旋转，缩放，移动和倾斜功能。

六个参数计算方式见 https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/matrix()

例子：实现 div 旋转 30°

div {
  transform: matrix(0.8, 0.5, -0.5, 0.8, 0, 0);
}

二、3D转换​

1、translate3d​

  • translateX(npx)

相对当前元素位置沿 X 轴移动


  • translateY(npx)

相对当前元素位置沿 Y 轴移动


  • translateZ(npx)

相对当前元素位置沿 Z 轴移动

div {
  transform: translateZ(20px);
}

  • translate3d(x,y,z)

上述合并简写

2、rotate3d​

  • rotateX(ndeg)

相对当前元素位置沿 X 轴旋转

div {
  transform: rotateX(30deg);
}

  • rotateY(ndeg)

相对当前元素位置沿 Y 轴旋转

div {
  transform: rotateY(30deg);
}

  • rotateZ(ndeg)

相对当前元素位置沿 Z 轴旋转

div {
  transform: rotateZ(30deg);
}

  • rotate3d(xdeg,ydeg,zdeg)

上述合并简写

3、scale3d​

  • scaleX(n)

相对当前元素位置沿 X 轴缩放

div {
  transform: scaleX(0.5);
}

  • scaleY(n)

相对当前元素位置沿 Y 轴缩放

div {
  transform: scaleY(0.5);
}

  • scaleZ(n)

相对当前元素位置沿 Z 轴缩放

div {
  transform: scaleZ(0.5);
}

  • scale3d(x,y,z)

上述合并简写