2D轉換模塊

一、transform屬性取值:

作用:該屬性允許我們對元素進行移動、旋轉、縮放

1.translate(100px, 0px) 移動

第一個參數:水平方向
第二個參數:垂直方向

2.rotate(45deg) 旋轉

deg是單位, 代表多少度

3.scale(1.5,1.5) 縮放

第一個參數:水平方向
第二個參數:垂直方向
注意點:
1.如果取值是1, 代表不變
2.如果取值大于1, 代表需要放大

  1. 如果取值小于1, 代表需要縮小
    4.如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數
    5.如果需要進行多個轉換, 那么用空格隔開
    6.2D的轉換模塊會修改元素的坐標系, 所以旋轉之后再平移就不是水平平移的

二、transform-origin屬性取值

作用:設置形變中心點

1.transform-origin:200px 0px;

第一個參數:水平方向
第二個參數:垂直方向
注意點
取值有三種形式: 具體像素 、百分比 、特殊關鍵字

三、perspective

透視,顯示 近大遠小的效果
一定要注意, 透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容