CSS 2D轉換模組總結
阿新 • • 發佈:2018-11-23
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); /*除此之外,平移也可以選擇軸向,寫法跟旋轉一樣,只寫一個引數*/