一、transform屬性取值:
作用:該屬性允許我們對元素進行移動、旋轉、縮放
1.translate(100px, 0px) 移動
第一個參數:水平方向
第二個參數:垂直方向
2.rotate(45deg) 旋轉
deg是單位, 代表多少度
3.scale(1.5,1.5) 縮放
第一個參數:水平方向
第二個參數:垂直方向
注意點:
1.如果取值是1, 代表不變
2.如果取值大于1, 代表需要放大
- 如果取值小于1, 代表需要縮小
4.如果水平和垂直縮放都一樣, 那么可以簡寫為一個參數
5.如果需要進行多個轉換, 那么用空格隔開
6.2D的轉換模塊會修改元素的坐標系, 所以旋轉之后再平移就不是水平平移的
二、transform-origin屬性取值
作用:設置形變中心點
1.transform-origin:200px 0px;
第一個參數:水平方向
第二個參數:垂直方向
注意點
取值有三種形式: 具體像素 、百分比 、特殊關鍵字
三、perspective
透視,顯示 近大遠小的效果
一定要注意, 透視屬性必須添加到需要呈現近大遠小效果的元素的父元素上面