transform（转换）CSS3

三维坐标系

在这里插入图片描述

1. x 轴：水平向右（x 右边是正值，左边是负值）
2. y 轴：垂直向下（y 下面是正值，上面是负值）
3. z 轴：垂直屏幕（往外面是正值，往里面是负值）

translate（移动）

transform: translateX(length); /* 仅仅在x轴移动 */
transform: translateY(length); /* 仅仅在y轴移动 */
transform: translateZ(
  length
); /*  仅仅在z轴移动  单位一般用像素（px）如果是正值，则向我们眼前移动，负值，则向后移动 */
transform: translate(x, y); /*  沿着x,y轴同时移动(参数中间用逗号隔开) */
transform: translate3d(
  x,
  y,
  z
); /* 其中x,y,z分别指向要移动的轴的方向的距离 xyz三个参数不能省略，没有就写0 */

1. translate 类似定位，不会影响到其他元素的位置
2. 对行内标签没有效果
3. translate 中的百分比单位是相对于自身元素的 width 和 height 的百分比

rotate（旋转）

transform: rotateX(
  45deg
); /* 沿着x轴正方向旋转45度  左手拇指指着x轴的正方向（右），手指弯曲的方向就是沿着x轴正方向旋转 */
transform: rotateY(
  45deg
); /*沿着y轴正方向旋转45度  左手拇指指着y轴的正方向（下），手指弯曲的方向就是沿着y轴正方向旋转 */
transform: rotateZ(45deg); /* 沿着z轴正方向旋转45度 */
transform: rotate3d(x, y, z, deg); /* 沿着自定义的轴来旋转 */

1. 度数为正数，顺时针旋转；负数则逆时针旋转
2. 度数的单位为 deg(不能省略)
3. 默认旋转的中心点是元素的中心点

设置中心点

transform-origin: x y;

1. 设置旋转中心点,x,y 中间用空格隔开
2. 参数可以使用像素、方位名词、百分比
3. 默认 x=50% y=50%(center center)

scale（缩放）

transform: scaleX(n); /* 沿着x轴缩放n倍 */
transform: scaleY(n); /* 沿着y轴缩放n倍 */
transform: scale(n); /* 沿着x,y轴缩放n倍 */

1. x,y 为盒子宽高的倍数，xy 之间用逗号隔开
2. 1 就是 1 倍也就是没有变化，小于 1 会缩小

scale（缩放）和普通缩放的区别？

scale（缩放）

1. 不会影响其他盒子
2. 可以设置缩放的中心点

普通缩放

1. 会影响其他盒子
2. 盒子高度只能向下延伸

skew（倾斜）

transform: skewX(45deg); /* 沿着x轴倾斜45度 */
transform: skewY(45deg); /* 沿着y轴倾斜45度 */
transform: skew(45deg, 45deg); /* 沿着xy轴的对角线倾斜45du */

perspecstive（透视）

d:透视也叫视距，就是眼睛到屏幕的距离

• 透视写在被观察元素的父盒子上面
• 单位一般是像素(px)

z:就是 z 轴，物体距离屏幕的距离，z 轴越大(正值)，我们看到的物体就越大

3D 呈现

transform-style: flat; /* 子盒子不开启立体空间   */
transform-style: preserve-3d; /* 子盒子开启立体空间   */

• 控制子盒子是否开始三维立体环境
• 代码写给父级，但影响的是子盒子

综合写法

transform: translate() rotate() scale() ...等;

其顺序会影转换的效果。（先旋转会改变坐标轴方向，移动放在最前面）