css3學習之2D轉換

2d轉換是相對定位,使用要加前綴

API列表

translate(x,y)  ,相對於座標原點的移動
rotate(xdeg)    ,順時針旋轉xdeg,負數爲逆時針旋轉
scale(x,y)      ,以元素x軸或者y軸的中間線爲起點,進行放大x或者y的倍數
skew(xdeg,ydeg) ,以元素x軸整體或者y軸整體爲軸線,y軸順時針翻轉,x軸逆時針翻轉
matrix()        ,matrix() 方法把所有 2D 轉換方法組合在一起,方法需要六個參數，包含數學函數，允許您：旋轉、縮放、移動以及傾斜元素

使用示例

.d{
    width: 100px;
    height: 100px;
    background: rgba(0,0,0,0.6);
}
.d-translate{
    transform: translate(100px,50px);
}
.d-rotate{
    transform: rotate(30deg);
}
.d-scale{
    transform: scale(0.5,2);
}
.d-skew{
    transform: skew(10deg,0deg);
    /*transform: skew(0deg,10deg);*/
}

“`

我是xxx

我是xxx

我是xxx

我是xxx

“`