1. 程式人生 > >CSS 2D轉換模組總結

CSS 2D轉換模組總結

transform: rotate(45deg);/*旋轉模組,其中deg是單位, 代表多少度*/



transform: translate(100px, 0px);/*平移模組,第一個引數:水平方向,第二個引數:垂直方向*/




transform: scale(0.5, 0.5)  /*縮放模組,第一個引數:水平方向
            第二個引數:垂直方向
            注意點:
            如果取值是1, 代表不變
            如果取值大於1, 代表需要放大
            如果取值小於1, 代表需要縮小
            如果水平和垂直縮放都一樣, 那麼可以簡寫為一個引數*/



transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);/*連寫*/



 /*
            1.什麼是透視
            近大遠小
            2.注意點
            一定要注意, 透視屬性必須新增到需要呈現近大遠小效果的元素的父元素上面
 */
      寫法:      perspective: 500px;



旋轉軸向:
/*預設情況下所有元素都是圍繞Z軸進行旋轉,想圍繞哪個軸旋轉, 那麼只需要在rotate後面加上哪個軸即可*/
            transform: rotateZ(45deg);
            transform: rotateX(45deg);


/*除此之外,平移也可以選擇軸向,寫法跟旋轉一樣,只寫一個引數*/