CSS3 提供了很多強(qiáng)大的功能，使開(kāi)發(fā)人員可以創(chuàng)建更加吸引人的視覺(jué)效果，而不需要依賴(lài)于 JavaScript 或 Flash。其中，transition 和 transform 是兩個(gè)常用的屬性，它們分別用于創(chuàng)建平滑的過(guò)渡效果和元素的變形效果。下面我們將詳細(xì)介紹這兩個(gè)屬性的使用方法并給出代碼示例。
transition
transition 屬性用于在一定的時(shí)間內(nèi)平滑地改變一個(gè)元素從一個(gè)樣式到另一個(gè)樣式。你可以指定過(guò)渡的持續(xù)時(shí)間、延遲時(shí)間和過(guò)渡效果的速度曲線。
屬性值：
-
transition-property: 指定應(yīng)用過(guò)渡的 CSS 屬性名稱(chēng)，如width,height,background-color等。 -
transition-duration: 指定過(guò)渡的持續(xù)時(shí)間，單位通常是秒（s）或毫秒（ms）。 -
transition-timing-function: 定義過(guò)渡效果的速度曲線，如linear,ease,ease-in,ease-out,ease-in-out或cubic-bezier(n,n,n,n)。 -
transition-delay: 定義過(guò)渡開(kāi)始前的延遲時(shí)間。
示例代碼：
/* 過(guò)渡效果應(yīng)用于寬度和背景顏色 */
div {
width: 100px;
background-color: red;
transition-property: width, background-color;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
}
/* 鼠標(biāo)懸停時(shí)改變寬度和背景顏色 */
div:hover {
width: 200px;
background-color: blue;
}
transform
transform 屬性允許你對(duì)元素進(jìn)行旋轉(zhuǎn)、縮放、傾斜或移動(dòng)。這對(duì)于創(chuàng)建動(dòng)態(tài)和吸引人的視覺(jué)效果非常有用。
屬性值：
-
rotate(): 旋轉(zhuǎn)元素。你可以指定一個(gè)角度（deg）來(lái)確定旋轉(zhuǎn)的程度。正值表示順時(shí)針旋轉(zhuǎn)，負(fù)值表示逆時(shí)針旋轉(zhuǎn)。 -
scale(): 縮放元素。你可以指定一個(gè)因子來(lái)確定縮放的程度。例如，scale(2)將元素放大兩倍，scale(0.5)將元素縮小到原來(lái)的一半。 -
translate(): 移動(dòng)元素。你可以指定水平和垂直方向上的距離（px 或 %）來(lái)確定移動(dòng)的程度。 -
skew(): 傾斜元素。你可以指定一個(gè)角度（deg）來(lái)確定傾斜的程度。正值表示順時(shí)針傾斜，負(fù)值表示逆時(shí)針傾斜。 -
matrix(): 通過(guò)一個(gè) 2D 或 3D 轉(zhuǎn)換矩陣來(lái)應(yīng)用多個(gè)轉(zhuǎn)換效果。
示例代碼：
/* 創(chuàng)建一個(gè)可旋轉(zhuǎn)、可縮放、可移動(dòng)的元素 */
div {
width: 100px;
height: 100px;
background-color: red;
/* 旋轉(zhuǎn)45度 */
transform: rotate(45deg);
/* 放大兩倍 */
transform: scale(2);
/* 向右移動(dòng)50px，向下移動(dòng)20px */
transform: translate(50px, 20px);
}
結(jié)合使用 transition 和 transform
你可以將 transition 和 transform 屬性結(jié)合使用，以創(chuàng)建更加復(fù)雜的動(dòng)畫(huà)效果。例如，你可以使用 transition 來(lái)平滑地改變一個(gè)元素的 transform 值。
示例代碼：
/* 元素初始狀態(tài) */
div {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(0deg);
transition: transform 2s ease-in-out;
}
/* 鼠標(biāo)懸停時(shí)旋轉(zhuǎn)元素 */
div:hover {
transform: rotate(360deg);
}
進(jìn)階學(xué)習(xí)
讓我們繼續(xù)深入這兩個(gè)主題。
transition
除了上述的基本屬性之外，transition還有一些其他的特性：
transition-property
除了常見(jiàn)的CSS屬性（如width, height, background-color等）之外，transition-property還可以應(yīng)用于一些更復(fù)雜的CSS屬性，如border-radius, box-shadow, text-shadow等。此外，你還可以使用all關(guān)鍵字來(lái)對(duì)元素的所有屬性應(yīng)用過(guò)渡效果。
多個(gè)過(guò)渡效果
你可以在一個(gè)聲明中指定多個(gè)過(guò)渡效果，只需用逗號(hào)將它們分開(kāi)。例如：
transition: width 2s, height 3s, background-color 4s;
這將分別應(yīng)用寬度、高度和背景顏色的過(guò)渡效果。
transform
同樣，transform也有一些我可能沒(méi)有提及的屬性和特性：
transform-origin
transform-origin屬性允許你改變?cè)刈冃蔚脑c(diǎn)。例如，旋轉(zhuǎn)一個(gè)元素時(shí)，你可以改變旋轉(zhuǎn)的中心點(diǎn)。默認(rèn)情況下，這個(gè)點(diǎn)是元素的中心點(diǎn)，但你可以將其移動(dòng)到元素的任何其他位置。例如：
transform-origin: top left; /* 將變形原點(diǎn)移動(dòng)到元素的左上角 */
3D 轉(zhuǎn)換
除了2D轉(zhuǎn)換之外，CSS3還支持3D轉(zhuǎn)換，這允許你在Z軸上移動(dòng)和旋轉(zhuǎn)元素。這可以創(chuàng)建一些非常吸引人的3D視覺(jué)效果。例如：
transform: rotateX(45deg); /* 在X軸上旋轉(zhuǎn)元素45度 */
transform: rotateY(45deg); /* 在Y軸上旋轉(zhuǎn)元素45度 */
transform: translateZ(20px); /* 在Z軸上移動(dòng)元素20px */
perspective 和 perspective-origin
當(dāng)你使用3D轉(zhuǎn)換時(shí)，你可能還希望改變觀察者的視角。perspective屬性允許你設(shè)置觀察者和Z=0平面之間的距離，從而改變3D轉(zhuǎn)換的視覺(jué)效果。perspective-origin屬性允許你改變觀察者的位置。例如：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-759816.html
perspective: 1000px; /* 設(shè)置觀察者和Z=0平面之間的距離為1000px */
perspective-origin: top right; /* 將觀察者移動(dòng)到元素的右上角 */
transform-style
當(dāng)你對(duì)父元素應(yīng)用3D轉(zhuǎn)換時(shí)，你可能希望子元素也保留其3D位置。默認(rèn)情況下，子元素的3D位置會(huì)被平展到2D空間。transform-style屬性允許你改變這種行為。例如：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-759816.html
transform-style: preserve-3d; /* 保留子元素的3D位置 */
到了這里，關(guān)于CSS3 屬性： transition過(guò)渡 與 transform動(dòng)畫(huà)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
