站長資訊網
        最全最豐富的資訊網站

        transform在CSS中是什么意思

        在CSS中,transform的意思為改變、變形,主要用于設置元素的形狀改變,實現元素的2D或3D轉換;該屬性可以配合屬性值(轉換函數)來對將元素進行旋轉rotate、扭曲skew、縮放scale、移動translate以及矩陣變形matrix。

        transform在CSS中是什么意思

        前端(vue)入門到精通課程:進入學習
        API 文檔、設計、調試、自動化測試一體化協作工具:點擊使用

        本教程操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

        Transform字面上就是變形,改變的意思,是css3的新增屬性,用來設置元素的形狀改變,實現元素的2D或3D轉換。

        在CSS3中transform主要包括以下幾種:旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

        語法:

        transform: none|transform-functions;即:transform: rotate | scale | skew | translate |matrix;

        其中none表示不變換,transform-functions表示一個或多個變換函數,以空格隔開

        transform在CSS中是什么意思

        一、旋轉 rotate

        1、rotate(angle):通過指定的角度參數對原元素指定一個2D旋轉。

        angle是指旋轉角度(單位為deg),如果設置的值為正數表示順時針旋轉,如果設置的值為負數,則表示逆時針旋轉。

        transform: rotate(45deg);  //順時針旋轉30度

        transform在CSS中是什么意思

        注意:旋轉的時候默認以元素中心點為基點進行旋轉,可以通過transform-origin屬性定義旋轉的基點位置

        transform-origin屬性:定義旋轉的基點。

        語法:

        transform-origin: x-axis y-axis z-axis;

        默認值:

        transform-origin: 50% 50% 0;

        2D的情況下,默認元素的左上角為0% 0%,例如:繞右下角旋轉45度

        transform-origin: 100% 100%;transform: rotate(45deg);

        transform在CSS中是什么意思

        2、rotate3d(x, y, z, angle):定義3D旋轉

        不常用

        3、rotateX(angle):定義沿著X軸的3D旋轉

        transform: rotateX(45deg);

        transform在CSS中是什么意思

        4、rotateY(angle):定義沿著Y軸的3D旋轉

        transform:rotateY(45deg);

        transform在CSS中是什么意思

        5、rotateZ(angle):定義沿著Z軸的3D旋轉

        由以下的例子可以看出,Z軸的方向是垂直于window的方向

        transform:rotateZ(45deg);

        transform在CSS中是什么意思

        二、移動 translate

        1、translate(x, y) :定義2D移動轉化

        x 是第一個過渡值參數,y 是第二個過渡值參數選項。如果未被提供,則ty以 0 作為其值。也就是translate(x,y),它表示對象進行平移,按照設定的x,y參數值,當值為負數時,反方向移動物體,其基點默認為元素中心點,也可以根據transform-origin進行改變基點。

        例如:

        transform:translate(50px,50px):

        transform在CSS中是什么意思

        2、translate(x):指定X軸方向上的一個移動

        例如:

        transform:translateX(50px):

        transform在CSS中是什么意思

        3、translate(y):指定Y軸方向上的一個移動

        例如:

        transform:translateY(50px):

        transform在CSS中是什么意思

        4、translate3d(x, y, z):定義3D移動轉換

        5、translateZ(z):指定Z軸方向上的一個移動

        三、縮放 scale

        1、scale(x, y):定義2D縮放轉換。

        X表示水平方向縮放的倍數,Y表示垂直方向的縮放倍數,而Y是一個可選參數,如果沒有設置Y值,則表示X,Y兩個方向的縮放倍數是一樣的。并以X為準。例如:

        transform: scale(0.7, 0.3);

        transform在CSS中是什么意思

        可以通過transform-origin對元素的基點進行設置,同樣基點在元素中心位置;例如:

        transform-origin: 100% 100%;transform: scale(0.7, 0.3);

        transform在CSS中是什么意思

        2、scaleX(x):在X軸方向進行縮放轉換

        transform: scaleX(0.7)

        transform在CSS中是什么意思

        3、scaleY(y):在Y軸方向進行縮放轉換

        transform: scaleY(0.7)

        transform在CSS中是什么意思

        4、scale3d:(x, y, z):定義3D縮放轉換

        5、scaleZ(z):在Z軸方向進行縮放轉換

        四、扭曲 skew

        1、skew(x-angle, y-angle) :定義沿著 X 和 Y 軸的 2D 傾斜轉換。

        skew是用來對元素進行扭曲變行,第一個參數是水平方向扭曲角度,第二個參數是垂直方向扭曲角度。其中第二個參數是可選參數,如果沒有設置第二個參數,那么Y軸為0deg。:

        transform: skew(10deg,10deg);

        transform在CSS中是什么意思

        同樣是以元素中心為基點,我們也可以通過transform-origin來改變元素的基點位置。例如

        transform-origin: 100% 100%;transform: skew(10deg,10deg);

        transform在CSS中是什么意思

        2、skewX(angle):定義沿著 X 軸的 2D 傾斜轉換

        transform: skewX(10deg);

        transform在CSS中是什么意思

        3、skewY(angle):定義沿著 Y軸的 2D 傾斜轉換

        transform: skewY(10deg);

        transform在CSS中是什么意思

        注意:如果要實現3D效果,需要將transform-style屬性設置為preserve-3d,即

        transform-style: preserve-3d;

        (學習視頻分享:web前端)

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 真实国产乱子伦精品免费| 国产玖玖玖九九精品视频| 欧美精品一本久久男人的天堂| 亚洲国产精品成人一区| 97国产视频精品| 国产精品第12页| 亚洲AV日韩精品久久久久| 久久久久九九精品影院| 99亚洲精品视频| 久久福利青草精品资源站| 久久精品夜夜夜夜夜久久| 日韩经典精品无码一区| 精品国产毛片一区二区无码 | 国产精品第一区第27页| 大伊香蕉精品一区视频在线| 精品无码一区二区三区亚洲桃色| 亚洲精品无码久久久久AV麻豆| 国产精品美女久久久网AV| 五月花精品视频在线观看| 国产精品一区在线播放| 东京热TOKYO综合久久精品| 精品国产三级a∨在线欧美| 人妻少妇精品中文字幕av蜜桃| 中文无码精品一区二区三区| 亚洲?V无码乱码国产精品 | 国产亚洲精品成人a v小说| 91不卡在线精品国产| 国产精品久久久久久一区二区三区| 精品无码人妻一区二区免费蜜桃| 亚洲精品乱码久久久久久按摩| 香港aa三级久久三级老师2021国产三级精品三级在 | 国产精品九九九| 韩国三级中文字幕hd久久精品| 精品国产一区二区三区久久蜜臀| 精品国产欧美一区二区三区成人| 久久精品一区二区三区中文字幕 | 精品人妻一区二区三区毛片| 国产综合精品久久亚洲| 欧洲精品一区二区三区在线观看| 亚洲国产成人精品无码久久久久久综合 | 亚洲AV永久精品爱情岛论坛|