CSS笔记 - 变形：平移，旋转与缩放

变形：平移，旋转与缩放

• 变形是指通过css来改变元素的形状或位置，变形不会影响到页面的布局

  transform用来设置元素的变形效果

• 平移

  • translateX() 沿着x轴方向平移

  • translateY() 沿着y轴方向平移

  • translateZ() 沿着z轴方向平移

• 旋转

  • rotateX() 绕x轴旋转
  • rotateY() 绕y轴旋转
  • rotateZ() 绕z轴旋转

• 缩放

  • scaleX()水平方向缩放

  • scaleY()垂直方向缩放

  • scale() 双方向缩放

• Z轴平移

  Z轴平移，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近

  Z轴平移属于立体效果，默认情况下网页不支持透视，需要设置网页的视距

  html {
      background-color: rgb(71, 44, 32);
      perspective: 800px;
  }