CSS3提供了2D轉(zhuǎn)換功能,可以使用矩陣來實(shí)現(xiàn)。
要使用2D轉(zhuǎn)換,需要使用transform屬性。transform屬性包含一些值,其中matrix()是最常用的。matrix()需要六個(gè)值來定義一個(gè)矩陣變換。下面是一個(gè)例子:
div { transform: matrix(1, 0.5, -0.5, 1, 50, 50); }
上面的代碼會(huì)將元素向下移動(dòng)50個(gè)像素,向右移動(dòng)50個(gè)像素,并沿著X軸和Y軸縮放0.5倍。其中,前四個(gè)值是縮放、旋轉(zhuǎn)和剪切模式的系數(shù),x和y是平移模式的像素距離。
下面是一個(gè)矩陣變換的完整例子:
div { transform: matrix( 0.866, 0.5, -0.5, 0.866, 100, 0 ); }
上面的代碼會(huì)將元素向下移動(dòng)100個(gè)像素,順時(shí)針旋轉(zhuǎn)30度,并沿著X軸縮放0.866倍。可以看到,使用矩陣可以非常方便地實(shí)現(xiàn)各種變換效果。
下一篇css3 模糊