2D变换和3D变换

2D变换

位移：translate translateX translateY

• 一个参数：translate(x)，代表沿x轴位移x像素，y轴默认为0
• 两个参数：translate(x, y)，代表沿x轴和y轴位移的距离
• x、y单位为px
• x值：为正则沿着x轴向右位移，为负则沿着x轴向左位移
• y值：为正则沿着y轴向下位移，为负则沿着y轴向上位移
• 如果是通过active进行位移，执行完毕后会还原
• 单独写法：translateX(x) translateY(y)
• 位移的参考原点为元素左上角

旋转：rotate

• rotate(angle)：参数只有一个
• 参数为旋转的角度，单位为deg
• 2d空间只能围绕元素中心的z轴旋转
• 参数为正值则顺时针旋转，为负值则逆时针旋转
• 默认为围绕元素中心为原点进行旋转

缩放：scale

• 一个参数：scale(num)，代表同时在x轴和y轴两个方向缩放相同的倍数
• 两个参数：scale(x, y) ，分别代表x和y轴方向缩放相应的倍数
• 参数为数字，无单位
• 默认值为1倍，就是不缩放
• 默认为围绕元素中心为原点进行缩放

变形：skew skewX skewY

• 一个参数：skew(x)，代表沿x轴变形x角度，y轴默认为0
• 两个参数：skew(x, y)，代表沿x轴变形x的角度，沿y轴变形y的角度
• 参数为变形的角度，单位为deg
• x值：为正则向左变形，为负则向右变形
• y值：为正则向上变形，为负则向下变形
• 单独写法：skewX(x) skewY(y)
• 默认为围绕元素中心为原点进行变形

变换的原点

• 原点就是元素的中心，可以通过transform-origin属性改变原点位置
• 默认值为transform-origin: center center;
• 除了位移(因为位移元素直接移跑了)，别的变换(旋转、缩放、变形）都是围绕原点变换的
• 原点关键字：top bottom center left right
• 只设置一个的话，另一个为默认值center
• 也可以使用px、em、百分比值(一般用不到)
• 设置的偏移值都是从元素左上角开始的

变换的特点

• 变换之后的元素不会脱离文档流
• 可以移出屏幕边缘或遮挡住旁边其他元素
• 行内元素需要改变元素的display为block或inline-block，或者改变其父元素的display为flex或grid后，才能使用变换
• 可以使用多重变换，用空格隔开，变换的每个值从右向左依次执行，通常将平移放到首位，最后执行

3D变换

父元素样式

• 3D变换需要父元素设置样式才能保留3d的变化效果
• 保留3D变换：transform-style: preserve-3d，默认值为flat表示不保留3D变换
• 设置视角深度：perspective: 1000px
  • 观察点位置：perspective-origin
    • 默认值为：perspective-origin: center center;
    • 第一个代表x轴上的位置，第二个值代表y轴上的位置
    • 取值可以为：关键字、长度值，百分比值(相对于当前元素的宽或高)，可以为负值
    • 可以设置的关键字：top bottom center left right
    • 上面关键字的顺序无关，浏览器会自动调整
    • top==0% bottom==100% center==50% left==0% right==100%
    • 设置的偏移值都是从元素左上角开始的

位移：translate3d translateX translateY translateZ

• translate3d(x, y, z)：必须传递三个参数
• translateX(x) translateY(y) translateZ(z)
• 参数单位为px
• x值：为正则沿着x轴向右位移，为负则沿着x轴向右位移
• y值：为正则沿着y轴向下位移，为负则沿着y轴向上位移
• z值：为正则沿着z轴向屏幕外位移，为负则沿着z轴向屏幕内位移

旋转：rotate3d rotateX rotateY rotateZ

• rotate3d(x, y, z, angle)：沿着x，y，z三个方向矢量值确定的坐标点旋转angle角度(比较少用)
• x，y，z为三个方向的矢量值，无单位
• rotateX(angle) rotateY(angle) rotateZ(angle) 沿着元素中心点穿过的(X/Y/Z)轴旋angle角度
• 参数angle单位为deg
• angle值：为正则为顺时针旋转，为负则为逆时针旋转
• 可以通过transform-origin: left来设置比如绕着元素的左边框旋转
• backface-visibility 属性定义当元素旋转到背面向屏幕时是否可见
  • visible 背面可见
  • hidden 背面不可见