才發(fā)現(xiàn)原來(lái)CSS3這么好用… 

CSS3盒子模型

CSS3中可以通過(guò) box-sizing 來(lái)指定盒模型，有2個(gè)值，即可指定為 content-box、border-box，這樣計(jì)算盒子大小的方式就發(fā)生了改變。

• box-sizing: content-box 盒子大小為 width+padding+border(默認(rèn))
• box-sizing: border-box 盒子大小為 width (前提padding和border不會(huì)超過(guò)width寬度)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a. CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素

filter: 函數(shù)();
例如：
filter: blur(5px);  /*blur模糊處理，數(shù)字越大越模糊*/

b.CSS3 calc函數(shù)

calc() 可以在聲明CSS屬性值時(shí)執(zhí)行一些計(jì)算

width: calc(100%-80px);

c. CSS3過(guò)渡

過(guò)渡動(dòng)畫(huà)：是重復(fù)一個(gè)狀態(tài)漸漸地過(guò)渡到另一個(gè)狀態(tài)

transition: 要過(guò)渡的屬性 花費(fèi)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始；
經(jīng)常搭配 /* :hover */一起使用
例如：
transition: width .5s, height .5s;
/*多個(gè)屬性用 逗號(hào)分隔 或者 all*/
/**誰(shuí)做過(guò)渡給誰(shuí)加**/

• 屬性： 寬度高度 背景顏色 內(nèi)外邊距都可以，也可以用all
• 花費(fèi)時(shí)間： 單位是秒(必須寫(xiě)單位) 比如 0.5s
• 運(yùn)動(dòng)曲線：默認(rèn)是ease(可以省略)
• 何時(shí)開(kāi)始：?jiǎn)挝皇敲?必須寫(xiě)單位)，可以設(shè)置延遲觸發(fā)時(shí)間，默認(rèn)是0s(可以省略)

2D轉(zhuǎn)換

轉(zhuǎn)換(transform)可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、縮放等效果。

• 移動(dòng)：translate
• 旋轉(zhuǎn)：rotate
• 縮放：scale

 二維坐標(biāo)系

1. 移動(dòng)translate

改變?cè)卦陧?yè)面的位置，類似定位

//移動(dòng)盒子位置：定位 盒子的外邊距 2D轉(zhuǎn)換移動(dòng)
transform:translate(x, y);
transform:translateX();
transform:translateY();

• 定義2D轉(zhuǎn)換中的移動(dòng)，沿著X和Y軸移動(dòng)元素
• translate最大的優(yōu)點(diǎn)：不會(huì)影響其他元素的位置
• translate中的百分比單位時(shí)相對(duì)于自身元素的translate:(50%, 50%);
• 對(duì)行內(nèi)標(biāo)簽沒(méi)有效果

2. 旋轉(zhuǎn)：rotate

2D旋轉(zhuǎn)指的是讓元素在二維平面內(nèi)順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)

transform:rotate(度數(shù))   //單位deg

• 角度為正時(shí)順時(shí)針，負(fù)值時(shí)為逆時(shí)針
• 默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)

3. 中心點(diǎn)transform-orgin

transform-origin:x y;

• 注意后面的參數(shù)x和y用空格隔開(kāi)
• x y默認(rèn)轉(zhuǎn)換的中心點(diǎn)是(50% 50%) 等價(jià)于center center還
• 可以給x y設(shè)置像素或者方位名詞(top bottom left right center)

4. 縮放scale

transform:scale(x, y);

x y用逗號(hào)分隔transform(i, j): 寬放大i倍，搞放大j倍；只寫(xiě)一個(gè)參數(shù)，第二個(gè)參數(shù)則和第一個(gè)參數(shù)一樣可以設(shè)置轉(zhuǎn)換中心點(diǎn)縮放，默認(rèn)以中心點(diǎn)縮放的，而且不影響其他盒子

5. 2D轉(zhuǎn)換綜合寫(xiě)法

a. 同時(shí)使用多個(gè)轉(zhuǎn)換，格式：transform:translate() rotate() scale()等;

b. 其順序會(huì)影響轉(zhuǎn)換的效果，(先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向)

c. 同時(shí)有位移和其他屬性，要把位移放前面

CSS3動(dòng)畫(huà)

動(dòng)畫(huà)(animation)可以通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫(huà)，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)效果，可以實(shí)現(xiàn)更多變化，更多控制，連續(xù)自動(dòng)播放等效果。

1. 動(dòng)畫(huà)的基本使用

• 先定義動(dòng)畫(huà)
• 再調(diào)用動(dòng)畫(huà)

a. 用keyframes定義動(dòng)畫(huà)(類似定義選擇器)

一個(gè)元素可以添加多個(gè)動(dòng)畫(huà)，用逗號(hào)分隔即可。

@keyframes 動(dòng)畫(huà)名稱 {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

• 0%是動(dòng)畫(huà)的開(kāi)始，100%是動(dòng)畫(huà)的結(jié)束
• 可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)
• from和to，等同于0%和100%
• 百分比應(yīng)是整數(shù)
• 可以做多個(gè)狀態(tài)的變化 keyframe 關(guān)鍵幀

 b. 元素使用動(dòng)畫(huà)

div {
    animation:名稱；
    animation-duration:持續(xù)時(shí)間：
}

2. 動(dòng)畫(huà)的常用屬性

3. 動(dòng)畫(huà)簡(jiǎn)寫(xiě)屬性

animation:動(dòng)畫(huà)名稱 持續(xù)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始 播放次數(shù) 是否反方向 動(dòng)畫(huà)起始或者結(jié)束的狀態(tài)

animation: first 5s linear 2s infinite alternate

• 簡(jiǎn)寫(xiě)屬性里面不含animation-play-state
• 暫停動(dòng)畫(huà)：animation-play-state: paused; 經(jīng)常和鼠標(biāo)經(jīng)過(guò)等其他配合使用
• 想要?jiǎng)赢?huà)走回來(lái)，而不是跳回來(lái)：animation-direction: alternate;
• 盒子動(dòng)畫(huà)結(jié)束后，停在結(jié)束位置：animation-fill-mode: forwards;

速度曲線細(xì)節(jié)

animation-timing-function: 規(guī)定動(dòng)畫(huà)的速度曲線，默認(rèn)是"ease"

3D轉(zhuǎn)換

• 3D位移和3D旋轉(zhuǎn)
• 3D位移：translate3d(x,y,z)
• 3D旋轉(zhuǎn)：rotate3d(x,y,z)
• 透視：perspective
• 3D呈現(xiàn)：transform-style

1. 位移translate3d

• transform: translateZ(100px); 沿著z軸移動(dòng)，一般單位為px
• translateZ(100px) 正為向外移動(dòng)，負(fù)為向內(nèi)移動(dòng)
• translate3d(x,y,z)，不能省略，沒(méi)有就寫(xiě)0

2. 透視perspective(單位px)

透視寫(xiě)在被觀察元素的父盒子上面的（近大遠(yuǎn)小）

d：就是視距，視距就是人的眼睛到屏幕的距離

z：就是z軸，物體距離屏幕的距離，z軸越大(正值)，我們看到的物體就越大

3. 旋轉(zhuǎn)rotate3d

rotate3d讓元素在三維平面沿著x軸、y軸、z軸或者自定義軸進(jìn)行旋轉(zhuǎn)

元素旋轉(zhuǎn)方向：左手準(zhǔn)則

x

• 左手的手拇指指向x軸的正方向
• 其余手指的彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向

y

• 左手的手拇指指向y軸的正方向
• 其余手指的彎曲方向就是該元素沿著y軸旋轉(zhuǎn)的方向(正值)

transform:rotate3d(x,y,z,deg): 沿著只定義軸旋轉(zhuǎn)deg為角度

xyz表示旋轉(zhuǎn)軸的矢量，最后一個(gè)標(biāo)示旋轉(zhuǎn)的角度

4. 3D呈現(xiàn)transform-style(重要)

• 控制子元素是否開(kāi)啟三維立體環(huán)境
• transform-style: flat子元素不開(kāi)啟3d立體空間 默認(rèn)
• transform-style: preserve-3d; 子元素開(kāi)啟3d立體空間
• 代碼寫(xiě)給父級(jí)，但影響的是子盒子

到此這篇關(guān)于CSS3過(guò)渡旋轉(zhuǎn)透視2d3d動(dòng)畫(huà)等效果的實(shí)例代碼的文章就介紹到這了,更多相關(guān)CSS3旋轉(zhuǎn)透視2d3d動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！