CSS基礎 transform屬性的基本使用 移動 旋轉 縮放

1.實現元素位移效果 
  語法：transform:translate(x軸水平移動距離，Y軸垂直移動距離) 
   取值：正負都可以 
   取值方式：數字+px 
   百分比 ：參照自己本的盒子的百分比 比如：本身自己的寬度是100px 那么x軸的百分之100，則走的是100px

使用寫法：
   transform:translate(100px,50px);/*向右移動100px,向下移動50px*/
   transform:translate(-100px,500px); /*向左移動100px,向上移動50px*/
   transform:translate(100%,50%)      /*沿着x軸自身的走100%像素,Y軸的50%像素*/

   transform:translate(100px)相當於transform:translateX(100px); /*沿着x軸走100px*/
   transform:translateY(100px);  /*沿着Y軸移動100px*/

2.rotate實現元素旋轉效果

  語法：transform：rotate(角度);/*280deg 即是280度，此值正負數都可以*/

  注意：必須要有過度過程：transtion：all 1s；整數值是順時針旋轉，負數值是逆時針旋轉

2.2 修改以什么為旋轉點（默認為中心）

   語法：transform-origin：取值；

  取值可以為：方位名詞、百分比、數字+px

  方位名詞：left，top，right，bottom

   例如：transform-origin:left bottom;  /*圍繞左下角旋轉*/

 

3.scale修改元素的尺寸

語法：tranform：scale(x軸縮放倍數，y軸縮放倍數) 

  特點：是從中心點放大縮小

  注意：1.建議只是用x軸或者y軸其中一個，讓其等比例縮放

       2.數字等於1不變，小於1縮小，大於1放大 

注意：注意：注意：重要的話說三遍！tranform 對行內標簽無效