首頁  >  文章  >  web前端  >  transform在CSS是什麼意思

transform在CSS是什麼意思

青灯夜游
青灯夜游原創
2022-09-21 17:23:275975瀏覽

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

transform在CSS是什麼意思

本教學操作環境: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

transform在CSS是什麼意思

transform在CSS是什麼意思

######################################################################################################### 1、translate(x, y)### :定義2D移動轉換######x 是第一個過渡值參數,y 是第二個過渡值參數選項。如果未被提供,則ty以 0 作為其值。也就是translate(x,y),它表示物件進行平移,依照設定的x,y參數值,當值為負數時,反方向移動物體,其基點預設為元素中心點,也可以根據transform-origin進行改變基點。 ######例如:######
transform:translate(50px,50px):
###################2、translate(x)###:指定X軸方向上的一個移動######例如:######
transform:translateX(50px):
###################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)

1transform在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);

1transform在CSS是什麼意思

同样是以元素中心为基点,我们也可以通过transform-origin来改变元素的基点位置。例如

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

1transform在CSS是什麼意思

2、skewX(angle):定义沿着 X 轴的 2D 倾斜转换

transform: skewX(10deg);

1transform在CSS是什麼意思

3、skewY(angle):定义沿着 Y轴的 2D 倾斜转换

transform: skewY(10deg);

1transform在CSS是什麼意思

注意:如果要实现3D效果,需要将transform-style属性设置为preserve-3d,即

transform-style: preserve-3d;

(学习视频分享:web前端

以上是transform在CSS是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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