变形 transform

• 围绕点： transform-origin //center 和百分号控制

  • 1 :0 100% 左下点

  • 2 :0 center; 左中点

• 缩放变形 

  • scale(); //大于1 则放大 小于1 则缩小

• 斜切变形

  • skew( 15deg,30deg );//一个水平方向逆时针斜切 一个竖直方向顺时针斜切 

• 所有3D空间上的变形都需要给外面的盒子设置景深perspective: 100px;

• 旋转变形

  • 平面：transform:rotate(30deg); //以中心点旋转30度

  • 空间：transform:rotateX(30deg);//以水平面为轴旋转30度 rotateY类似

• 位移变换

  • 属性：老家留坑 和相对定位类似

  • 平面：translate(100px,200px); //右移100px 下移200px 

  • 空间：translateX(100px);//沿着当时的X方向走100px Y Z类似

• 变形和位移可以一起写

  • transform: rotateY(-90deg) translateZ(100px);// 正方形的右边（记得外面的盒子一定要加perspective）