/*旋轉
其中deg是單位, 代表多少度*/
transform
: rotate(45deg);
/*預設情況下所有元素都是圍繞z軸進行旋轉*/
transform
: rotatez(45deg);
/* 總結:
想圍繞哪個軸旋轉, 那麼只需要在rotate後面加上哪個軸即可
*/transform
: rotatey(45deg);
transform
: rotatex(45deg);
/* 平移
第乙個引數:水平方向
第二個引數:垂直方向
*/transform
: translate(100px, 0px);
/* 縮放和擴充套件
第乙個引數:水平方向
第二個引數:垂直方向
注意點:
如果取值是1, 代表不變
如果取值大於1, 代表需要放大
如果取值小於1, 代表需要縮小
如果水平和垂直縮放都一樣, 那麼可以簡寫為乙個引數
*//*transform: scale(0.5, 0.5);*/
transform
: scale(1.5);
/* 注意點:
1.如果需要進行多個轉換, 那麼用空格隔開（鞋兩個transform屬性，後面設定的transform屬性會覆蓋前面的transform屬性）
2.2d的轉換模組會修改元素的座標系, 所以旋轉之後再平移就不是水平平移的
*/transform
: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
/*transform: translate(100px, 0px);*/
/* 改變形變點
第乙個引數:水平方向
第二個引數:垂直方向
注意點取值有三種形式
具體畫素
百分比特殊關鍵字
*//*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin
: left top;
/* 預設情況下所有的元素都是以自己的中心點作為參考來旋轉的, 我們可以通過形變中心點屬性來修改它的參考點
*/
CSS之2D轉換模組
參考w3手冊 transform 屬性向元素應用從2d 或3d轉換。該屬性允許我們對元素進行旋轉 縮放 移動或者傾斜。預設情況下所有元素都是圍繞z軸進行旋轉，如果想圍繞哪個軸旋轉，那麼只需要在rotate後面加上哪個軸即可。如 transform rotatez 45deg transform ro...
2D轉換之旋轉 rotate的用法
其中e html css 案例 media 1006.jpg是我本地儲存該的路徑。現在，我們用rotate來進行旋轉 rotate進行進行旋轉的規則的為 rotate deg 若rotate所接 deg 為正值，則順時針旋轉 若rotate所接 deg 為負值，則逆時針旋轉。deg表示角度的單位 e...
2D位移與旋轉
2d 平面空間的元素變形。由x,y軸決定。變形屬性 transform 屬性 值 transform的屬性值為功能函式。2d的功能函式 2d的位移 2d的旋轉 2d的縮放 2d的傾斜 2d位移 transform translate x,y transform translatex x軸移動的距離 ...