目录

• 1，CSS 2D 转换
• • 1.1，translate
  • 1.2，rotate
  • 1.3，scale
• 2，CSS 3D 转换
• • 2.1，rotateX
  • 2.2，rotateY
  • 2.3，rotateZ

1，CSS 2D 转换

CSS 转换（transform属性）允许您移动、旋转、缩放和倾斜元素。

/*
transform：变形样式:
        translate：移动
        rotate：旋转，单位是度（deg°）。
        scale：缩放
*/

1.1，translate

translate：移动元素，两个参数分别代表横向偏移量（x轴）和纵向偏移量（y轴）。

transform: translate(50px,30px);

1.2，rotate

rotate：旋转元素，参数是旋转的度数。

transform: rotate(30deg);

1.3，scale

scale：缩小/放大元素，两个参数分别代表横向缩放比（宽度）和纵向缩放比（高度）。

transform: scale(0.5,3.5);

改变被转换元素的位置，默认是中心点50%，50%。

transform-origin: 100% 100%;

2，CSS 3D 转换

transform属性，也可以使用以下3D 转换方法：

  rotateX()
  rotateY()
  rotateZ()

2.1，rotateX

rotateX()：使元素绕其 X 轴旋转给定角度。

.main {
  transform: rotateX(150deg);
}

2.2，rotateY

rotateY() ：使元素绕其 Y 轴旋转给定角度。

.main {
  transform: rotateY(120deg);
}

2.3，rotateZ

rotateZ()： 使元素绕其 Z 轴旋转给定角度。

.main {
  transform: rotateZ(90deg);
}

perspective：属性定义了3d元素距离视图的间距，单位是像素。

perspective: 1000px;