css3 之2d變換
l transform
• rotate() 旋轉函式 取值度數
– deg 度數
– transform-origin旋轉的基點
• skew()傾斜函式 取值度數
– skewx()
– skewy()
• scale()縮放函式 取值 正數、負數和小數
– scalex()
– scaley()
• translate()位移函式
– translatex()
– translatey()
1.
rotate()
旋轉函式
取值度數 –
deg 度數
111
2. 斜切
x,y綜合
綜合案例：斜切的導航
3.
scale()
縮放函式
取值正數、負數和小數
body
.box
body:hover .box
111
放大2倍
4.
translate()
位移函式
111
向左下移動
5.
transform-origin
變換基點
旋轉預設是以元素中心旋轉
例1：關鍵字形式
基點：右下
加旋轉，縮小
111
例2：具體數值
111
基點在方塊外，實現向外旋轉出去的效果
6.
transform
執行順序問題 — 後寫先執行
順序不同，執行出效果就不同
第乙個：先縮放0.5，再向右走100px
第二個：先向右走100px,再縮小0.5，相當於向右走50
7.
matrix(a,b,c,d,e,f)
矩陣函式
8.
標準模式：
matrix(1,0,0,1,0,0)（預設形式）
matrix(a,b,c,d,e,f);
ie模式：
progid:dximagetransform.microsoft.matrix(m11= 1, m12= 0, m21= 0 , m22=1,sizingmethod='auto expand');
matrix(m11= a, m12= c, m21= b , m22=d,sizingmethod='auto expand');
1)
通過矩陣實現位移 x
軸位移: e=e+x y
軸位移: f=f+y
2)
縮放:
x軸縮放 a=x*a c=x*c; y
軸縮放 b=y*b d=y*d;
x軸縮放0.5，y軸縮放0.2
3)
通過矩陣實現傾斜 x
軸傾斜: c=math.tan(xdeg/180*math.pi) y
軸傾斜: b=math.tan(ydeg/180*math.pi)
x軸傾斜30度，c=math.tan(30/180*math.pi)約等於0.58
斜切加放大
4)
通過矩陣實現旋轉
a=math.cos(deg/180*math.pi);
b=math.sin(deg/180*math.pi);
c=-math.sin(deg/180*math.pi);
d=math.cos(deg/180*math.pi);
旋轉30度
乙個小bug,在ie下，不是圍繞中心旋轉
5)
ie下基點修正
CSS3中2D轉換之位移
css3中2d轉換之位移 css3中移動盒子位置的方法有 定位 改變盒子的外邊距 2d轉換移動。接下來，我們學習2d轉換中位移的方法。首先，我們給出兩個div盒子作為研究物件，舉例 如下 我們分別給兩個盒子設定性質，同時用不同的顏色進行區分，如下 div first child div last c...
2D縮放和3D位移
2d 平面空間的元素變形。變形屬性 transform transform的屬性值為功能函式。2d功能函式 2d的位移 2d的旋 2d的縮放 2d的傾斜 transform translate x,y 位移 transform translatex x軸移動的距離 transform transla...
2D位移與旋轉
2d 平面空間的元素變形。由x,y軸決定。變形屬性 transform 屬性 值 transform的屬性值為功能函式。2d的功能函式 2d的位移 2d的旋轉 2d的縮放 2d的傾斜 2d位移 transform translate x,y transform translatex x軸移動的距離 ...