首頁 >web前端 >前端問答 >transform是css3新增的屬性嗎

transform是css3新增的屬性嗎

青灯夜游原創: 2022-02-28 11:54:122153瀏覽

transform是css3的新增屬性，用來設定元素的形狀改變，實現元素的2D或3D轉換，可以配合屬性值（轉換函數）來對將元素進行旋轉rotate、扭曲skew、縮放scale、行動translate以及矩陣變形matrix。

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

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

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

rotate 旋轉

透過指定角度對元素進行旋轉度數為正順時針旋轉，如果設定的值為正數表示順時針旋轉，如果設定的值為負數，則表示逆時針旋轉。
例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #000;
    }
   .box{
        width: 100px;
        height: 100px;
        border: 1px solid #fff;
        position: relative;
        top: 100px;
        left: 100px;

    }
    .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        transform:rotate(30deg);
    }
</style>
<body>
    <div>
        <div></div>
    </div>
   

</body>
</html>

效果：

transform是css3新增的屬性嗎

#scale 縮放

#scale 有三種情況：
scale(x,y)
使元素水平方向和垂直方向同時縮放

scaleX(x) transform是css3新增的屬性嗎元素僅水平方向縮放（X軸縮放）

#scaleY(y)

<pre class="brush:js;toolbar:false;">.box{ transfrom:scale(2,2) } .box{ transfrom:scaleX(2) } .box{ transfrom:scaleY(2) }</pre>效果圖：
#translate 移動
移動translate分為三種情況：
translate(x,y)
水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；

translateX(x)

僅水平方向移動（X軸移動）；

transform是css3新增的屬性嗎

translateY(Y)僅垂直方向移動（Y軸移動）

transform是css3新增的屬性嗎
translate(x,y)

.box{
	transfrom：translate(100px,20px);
}

transform是css3新增的屬性嗎
# #transform:translateX()

.box{
        transform:translateX(100px);
    }

transform:translateY()

```
.box{
		transform:translateY(100px);
}
```
skew也分為三種情況
skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

transform是css3新增的屬性嗎 skewX(x)
僅使元素在水平方向扭曲變形（X軸扭曲變形）；

skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

.box{
		 transform:skew(20deg,20deg);
}
.box{
		 transform:skewX(20deg);
}
.box{
		 transform:skewY(20deg);
}

####transform-origin 改變元素基點###### ###transform-origin(X ,Y)###：用來設定元素的運動的基點（參考點）。預設點是元素的中心點。其中X和Y的值可以是百分值、em、px，其中X也可以是字元參數值left、center、right；Y和X一樣除了百分值外還可以設定字元值top、center、bottom# #####（學習影片分享：###css影片教學###、###web前端入門教學###）###

以上是transform是css3新增的屬性嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jquery slim是什麼下一篇：jquery slim是什麼

看更多