CSS3--------旋轉

1、旋轉: rotate(角度deg),沿着z軸旋轉,正值是順時針,負值是逆時針旋轉

transform: rotate(180deg);

2、 旋轉中心點: transform-origin    水平  垂直 
                 水平: left/center(默認值)/right 
                 垂直: top/center(默認值)/bottom 
                 transform-origin: right center; 
                 可以用數值 
                 transform-origin: 30px 50px; 

3、旋轉軸
                rotateX 沿着x軸旋轉,從右側向左看,正值是順時針旋轉,負值是逆時針旋轉
                沿着x軸旋轉,旋轉中心點在y軸上
                rotateY 沿着Y軸旋轉,從下向上看,正值是順時針旋轉,負值是逆時針旋轉
                沿着y軸旋轉,旋轉中心點在x軸上

 

注意：

transform是複合屬性,位移和旋轉都屬於transform中屬性值,
當旋轉和位移同時存在時,要先位移後旋轉,否則位移的位置會旋轉發生改變

transform:  translate(300px,100px) rotate(90deg);