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

11. 变形：平移，旋转与缩放

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

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

11.1 平移

• 语法

  translateX() 沿着x轴方向平移

  translateY() 沿着y轴方向平移

  translateZ() 沿着z轴方向平移

• Z轴平移

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

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

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

• 几种水平垂直居中的方式对比

1. 绝对定位的方式

   /* 这种居中方式，只适用于元素的大小确定时 */
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   margin: auto;
   

2. table-cell的方式

   /* table-cell的方式具有一定局限性 */
   display: table-cell;
   vertical-align: middle;
   text-align: center;
   

3. transform的方式

   /* transform变形平移的方式 */
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   

11.2 旋转

• 语法

  rotateX() 绕x轴旋转

  rotateY() 绕y轴旋转

  rotateZ() 绕z轴旋转

11.3 缩放

• 语法

  scaleX()水平方向缩放

  scaleY()垂直方向缩放

  scale() 双方向缩放