9.15日音訊,首創網絡談CSS中transform屬性
日期:2022-09-15發布:首創網絡瀏覽:605次
9.15日音訊,首創網絡談CSS中transform屬性。通過transform,可以讓元素進行移動(translate)、旋轉(rotate)、縮放(scale)、傾斜(skew)。如果該屬性有一個非none值,將會產生一個層疊上下文.在這種情···
本文關鍵字:邯鄲網絡公司,邯鄲網站建設,網站優化,SEO,企業畫冊,VI設計,首創網絡
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)
- 歡迎大家閱讀瀏覽,部分內容來源于網絡,如有侵權,請聯系我們刪除!
服務項目
熱門信息
- 公司簽約河北仁發公司網站建設項目
- 8182022-11-26

- 公司簽約邯鄲神隆超越公司網站建設項目
- 5992022-11-13

- 公司簽約勝牌潤滑油公司網站建設項目
- 6382022-10-22

- 公司簽約河北太行公司網站建設項目
- 5602022-10-08

- 首創網絡2022年國慶節放假通知
- 5092022-09-30

- 9.23日音訊,首創網絡談FLEX屬性的應用
- 3532022-09-23

- 9.15日音訊,首創網絡談CSS中transform屬性
- 6062022-09-15

- 首創公司2022年端午節放假通知
- 6902022-06-02

- 首創公司2022年“五一”勞動節放假通知
- 3332022-04-29

- 公司簽約邯鄲倚道金屬網站改版項目
- 4262022-04-20
