9.15日音訊,首創網絡談CSS中transform屬性。通過transform,可以讓元素進行移動(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)。如果該屬性有一個非none值,將會產生一個層疊上下文.在這種情況下對象將作為它包含的position:fixed元素的包含塊(acontainingblock)。
1.移動:translate
一個值:transform:translate(100px)
表示水平方向移動的位移,等同于translateX(100px)
translateX(x):沿X軸位移
translateY(y):沿Y軸位移
translateZ(z):沿Z軸位移
兩個值:transform:translate(100px,200px)
第一個表示水平方向移動的位移,第二個表示垂直方向移動的位移
translate(x,y):沿XY軸位移
三個值:translate3d(10px,20px,10px)
表示3D三個方向移動的位移,順序為X,Y,Z
2.旋轉:transform:rotate(ndeg)(其中n為旋轉度數)
以角度(deg)為單位,正數是順時針旋轉,負數是逆時針旋轉
rotate():2D旋轉
rotateX():沿著X軸3D旋轉
rotateY():沿著Y軸3D旋轉
rotateZ():沿著Z軸3D旋轉.要在其父級配合transform-style:preserve-3d;使用
rotate3D(x,y,z,ndeg):3D旋轉,接受四個參數,x,y,z介于0-1之間,n是旋轉的度數。元素圍繞著xyz在空間中確定的唯一坐標點和原點之間的連線旋轉指定的角度,這就是rotate3D。
3.縮放:scale
一個值:transform:scale(1)
表示水平跟垂直方向同時放大1倍
兩個值:transform:scale(1,2)
第一個參數表示水平方向的縮放比例,第二個參數表示垂直方向的縮放比例,
等同于scaleX(1)和scaleY(2)
三個值:scale3d(0.5,0.3,0.4)
表示3D三個方向縮放的比例,順序為X,Y,Z軸
數值為負時為縮小
4.傾斜:skew
一個值:transform:skew(10deg)
表示水平方向的傾斜角度,等同于skewX(10deg)
skewX:表示水平方向的傾斜角度
skewY:表示垂直方向的傾斜角度
兩個值:transform:skew(10deg,20deg)
第一個參數表示水平方向的傾斜角度,第二個參數表示垂直方向的傾斜角度
5.元素的基點:transform-origin:10px20px
值得注意的是:在進行以上的變形操作時,默認都是以元素的中心為基點.
要想改變基點則可以使用transform-origin屬性
有兩個參數:第一個表示距離元素左上角水平方向的距離,第二個表示距離元素左上角垂直方向的距離。
第一個參數可以設置為left、center、right,第二個參數可以設置為top、center、bottom。
6.合寫:transform:rotate(45deg)scale(1)skew(40deg,30deg)translate(100px200px)
首創網絡成立于2012年,是一家專業的品牌網站設計和網絡營銷推廣公司,服務領域涵蓋網站設計、市場策劃、企業畫冊及VI視覺設計、網站域名空間等領域,公司擁有一批高素質人才,著力打造品牌網站設計制作和網上營銷策略執行兩大優勢。
九年來,憑借對市場趨勢敏銳的洞察,和對消費者、企業形態深刻的理解,我們服務的已遍及京津冀、長三角、珠三角等領域,行業覆蓋政府機構、企事業單位、無線通訊、環保、電子、醫藥、交通、園林、地產等行業,諸多知名企業,如廣州京信集團、廣東聯通廣州分公司、搜狐家居廣州站、搜狐家居邯鄲站等,都鑒證了首創設計公司的品牌設計思想與能力,首創設計公司也與諸多企業勃的市場經濟中互促共生。