這篇文章主要介紹“CSS3的transition與transform屬性怎么使用”，在日常操作中，相信很多人在CSS3的transition與transform屬性怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS3的transition與transform屬性怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括湯旺網(wǎng)站建設(shè)、湯旺網(wǎng)站制作、湯旺網(wǎng)頁制作以及湯旺網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，湯旺網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到湯旺省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

一：transition 過渡

transition 可以做出 CSS 的過渡效果，例如要過渡的屬性名稱，要過渡的時(shí)間，過渡的延遲等待時(shí)間，過渡的速度變化（過渡類型）......等等

---

transition 常用屬性：

• transition-property：用于指定要參與過渡的屬性名稱

• transition-duration：用于指定過渡的持續(xù)時(shí)間

• transition-delay：用于指定過渡的延遲等待時(shí)間

• transition-timing-function：用于指定過渡的類型

---

下面會對這四個(gè)常用屬性做出逐個(gè)講解，大家記住一句話 ------- 誰做過渡給誰加過渡屬性

1.1 transition-property 指定過渡屬性

transition-property 用于指定要參與過渡的屬性名稱，例如你想要長寬過渡，那么在后面寫 width，height 即可，如果想省事可以寫成 all，即全屬性都變化。

過渡效果：長寬過渡前均為 200，過渡后變成了 300

1.2 transition-duration 過渡時(shí)間

transition-duration 用于指定過渡的時(shí)間，只需要在后面加上想要過渡的時(shí)間即可，可以分別設(shè)置與 property 相對應(yīng)的過渡時(shí)間，也可以只設(shè)置一個(gè)應(yīng)用于全部

過渡效果：長寬過渡前均為 200，在經(jīng)歷了長為3s，寬為1s的過渡后長寬均變成了 300

1.3 transition-delay 過渡延遲

transition-delay 用于指定過渡的延遲等待時(shí)間，即多少秒后開始過渡，只需要在后面加上想要等待的時(shí)間即可，可以分別設(shè)置與 property 相對應(yīng)的等待時(shí)間，也可以只設(shè)置一個(gè)應(yīng)用于全部

過渡效果：光標(biāo)放上去后等待了2s才開始過渡

1.4 transition-timing-function 過渡類型

transition-timing-function 可以用來設(shè)置過渡時(shí)的類型，其有以下常用類型：

• ease：先加速后減速

• linear：勻速

• ease-in：加速

• ease-out：減速

• ease-in-out：先加速后減速（較ease速度變化效果明顯）

• cubic-bezier：貝塞爾曲線

---

速度變化大同小異只是變化速度不同，此處只舉一個(gè) ease-in 的例子

過渡效果：過渡類型為 ease-in 逐漸加速

1.5 過渡的連寫形式

我們過渡中最常用的還是連寫形式，連寫形式過渡屬性我們方便起見寫作 all 即可，然后別的過渡屬性跟在后面空格隔開即可，哪個(gè)元素要做過渡就把過渡加給哪個(gè)元素，此處是div鼠標(biāo)放上后擴(kuò)大，但是是div做過渡，所以過渡屬性加給div

二：transform 2D動畫效果

transform 可以讓過渡元素產(chǎn)生一些常規(guī)的 2D 動畫效果，例如旋轉(zhuǎn)，位移，縮放，扭曲......等等，以及 3D 的立體效果。

---

transform 2D/3D中常用屬性：

• transform-origin：基點(diǎn)

• transform：translate：平移效果

• transform-rotate：旋轉(zhuǎn)效果

• transform-scale：縮放效果

---

下面會對這六個(gè)常用屬性做出逐個(gè)講解，有個(gè)注意點(diǎn)要提醒：大多數(shù)情況下，如果既有旋轉(zhuǎn)也有移動，要先寫移動再寫旋轉(zhuǎn)

2.1 transform-origin 基點(diǎn)

基點(diǎn)就是位移或者旋轉(zhuǎn)等變形圍繞的中心，默認(rèn)都是中心點(diǎn)，例如先舉個(gè)旋轉(zhuǎn)的例子（旋轉(zhuǎn)后面會講到）大家體會一下基點(diǎn)的概念。切記：基點(diǎn)設(shè)置給要過渡的元素

---

基點(diǎn)的值：

基點(diǎn)的值可以是具體數(shù)值例如 transform-origin：20px 30px; 第一個(gè)為x方向，第二個(gè)為y方向，也可以是方位名詞 transform-origin：top left; 此處先寫x或先寫y方向都可以，此處 top left 表示基點(diǎn)為左上角，bottom right 表示右下角......

2.1.1 默認(rèn)的基點(diǎn)

默認(rèn)基點(diǎn)為元素正中心

2.1.2 設(shè)置后的基點(diǎn)

設(shè)置基點(diǎn)為 transform-origin：bottom left; （左下角）

2.2 transform：translate 平移

平移可分為以下幾種：

• transform：translateX  沿水平方向平移

• transform: translateY  沿豎直方向平移

• transform: translateZ  沿Z方向移動的距離，不加透視的話看不出來效果，這個(gè)放在后面3D板塊講解

• transform：translate(x, y, z)  沿和向量方向平移，第一個(gè)為x方向移動距離，第二個(gè)為y方向移動的距離，第三個(gè)為z軸移動的距離，中間要求逗號隔開

---

案例中我們只舉例第最后一個(gè)組合寫法，其它都是單獨(dú)的朝某個(gè)方向移動較為簡單

效果為水平走200px，豎直走200px

2.3 transform：rotate 旋轉(zhuǎn)

旋轉(zhuǎn)的角度單位為 deg，要旋轉(zhuǎn)360度即為 360deg

---

旋轉(zhuǎn)可分為以下幾種：

• transform：rotateX   以x為軸旋轉(zhuǎn)，不加3D透視看不出立體3D效果，后面講到3D再講解

• transform: translateY 以y為軸旋轉(zhuǎn)，不加3D透視看不出立體3D效果，后面講到3D再講解

• transform: translateZ  沿Z為軸旋轉(zhuǎn)，為2D平面旋轉(zhuǎn)，可以設(shè)置基點(diǎn)

---

此處先講第三個(gè)不需要加3D透視的沿z軸旋轉(zhuǎn)

效果為繞z軸旋轉(zhuǎn)了90度

 2.4 transform：scale 放縮

此處放縮的優(yōu)點(diǎn)在于其是不影響其他頁面布局的位置的，并且可以設(shè)置基點(diǎn)，默認(rèn)基點(diǎn)為中心，放縮默認(rèn)為圍繞中心向外擴(kuò)大或向內(nèi)縮小，參數(shù)直接填寫 要放縮的倍數(shù)即可，例如要放縮2倍： transform：scale(2)

效果為以左上角為基點(diǎn)擴(kuò)大了兩倍

三：transform 3D動畫效果

這一板塊就要開始我們的3D效果了，上述案例中的沿z位移，繞x/y旋轉(zhuǎn)等等，其實(shí)都是3D的動畫效果，我們需要加上透視屬性才能有用：perspective: 1000px; 數(shù)值是視距可以自己設(shè)置，這個(gè)值大小可以根據(jù)自己的視覺感受調(diào)整滿意即可。

• 注意：透視要加給需要3D效果的元素的父元素

---

舉個(gè)例子感受下透視perspective的重要性：

3.1 不加透視的繞x軸旋轉(zhuǎn)

不加透視視覺效果毫無立體感

3.2 加透視的繞x軸旋轉(zhuǎn)

透視要加給需要3D效果的元素的父元素，此處div的父元素為body，所以給body加透視

加上透視后有了近大遠(yuǎn)小的立體呈現(xiàn)感，不同的透視值對應(yīng)的效果也不同，自己覺得合適即可，繞 y 旋轉(zhuǎn)同理。

3.3 加透視的沿z軸平移

加上透視后沿z軸移動，我們想想是不是效果應(yīng)該是慢慢變大或變小

沿z平移200px，視覺上立體感為盒子放大了

3.4 重要屬性：是否開啟3D效果呈現(xiàn)

這個(gè)屬性為 transform-style，默認(rèn)值為 flat ，即不開啟子盒子3D效果保持呈現(xiàn)，如果值改為 preserve-3d，則開啟子盒子3D效果保持呈現(xiàn)，這個(gè)屬性和透視一樣也是 寫給父級，但是影響的是子盒子3D效果是否保持呈現(xiàn)

---

• transform-style：flat  默認(rèn)值，代表不開啟保持子盒子3D效果

• transform-style：preserve-3d  代表開啟保持子盒子3D效果

舉例子說明一下 ：

例如我們想做出這個(gè)效果，理論上只需要讓藍(lán)色的子盒子繞x旋轉(zhuǎn)一定角度，再讓外部粉色大盒子繞y旋轉(zhuǎn)一定角度即可呈現(xiàn)

第一步：

讓藍(lán)色子盒子繞x旋轉(zhuǎn)一定角度，并且記得父盒子添加透視

        .out{
            width: 200px;
            height: 200px;
            background-color: rgb(229, 171, 171);
            margin: 100px auto;
            perspective: 500px;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: rgb(71, 142, 219);
            transform: rotateX(60deg);
        }

成功呈現(xiàn)出以下效果：

第二步：

讓外部粉色父盒子繞y旋轉(zhuǎn)一定角度即可，由于外部大盒子也需要透視效果，所以給其父元素body也要加上透視

出現(xiàn)了很嚴(yán)重的問題，藍(lán)色子盒子的透視效果沒有呈現(xiàn)出來

這時(shí)候就需要我們這個(gè)很重要的屬性了  transform-style：preserve-3d 開啟子元素的3D效果保持

第三步：

開啟內(nèi)部藍(lán)色盒子的3D效果保持 transform-style：preserve-3d，注意要寫給父級。另外我們的透視可以寫給父親的父親，所以此處當(dāng)父子兩個(gè)盒子都需要透視時(shí)，只需要給父親的父親body加上透視即可，父親不需要再加透視。

到此，關(guān)于“CSS3的transition與transform屬性怎么使用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！