CSS3過渡旋轉(zhuǎn)透視2d3d動畫等效果的實例代碼

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

CSS3盒子模型

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

• box-sizing: content-box 盒子大小為 width+padding+border(默認(rèn))
• box-sizing: border-box 盒子大小為 width (前提padding和border不會超過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屬性值時執(zhí)行一些計算

width: calc(100%-80px);

c. CSS3過渡

過渡動畫：是重復(fù)一個狀態(tài)漸漸地過渡到另一個狀態(tài)

transition: 要過渡的屬性 花費時間 運動曲線 何時開始；
經(jīng)常搭配 /* :hover */一起使用
例如：
transition: width .5s, height .5s;
/*多個屬性用 逗號分隔 或者 all*/
/**誰做過渡給誰加**/

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

2D轉(zhuǎn)換

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

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

 二維坐標(biāo)系

1. 移動translate

改變元素在頁面的位置，類似定位

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

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

2. 旋轉(zhuǎn)：rotate

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

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

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

3. 中心點transform-orgin

transform-origin:x y;

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

4. 縮放scale

transform:scale(x, y);

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

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

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

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

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

CSS3動畫

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

1. 動畫的基本使用

• 先定義動畫
• 再調(diào)用動畫

a. 用keyframes定義動畫(類似定義選擇器)

一個元素可以添加多個動畫，用逗號分隔即可。

@keyframes 動畫名稱 {
    0% {
        width:100px;
    }
    100% {
        width:200px;
    }
}

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

 b. 元素使用動畫

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

2. 動畫的常用屬性

3. 動畫簡寫屬性

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

animation: first 5s linear 2s infinite alternate

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

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

animation-timing-function: 規(guī)定動畫的速度曲線，默認(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軸移動，一般單位為px
• translateZ(100px) 正為向外移動，負(fù)為向內(nèi)移動
• translate3d(x,y,z)，不能省略，沒有就寫0

2. 透視perspective(單位px)

透視寫在被觀察元素的父盒子上面的（近大遠(yuǎn)?。?/p>

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

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

3. 旋轉(zhuǎn)rotate3d

rotate3d讓元素在三維平面沿著x軸、y軸、z軸或者自定義軸進行旋轉(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)軸的矢量，最后一個標(biāo)示旋轉(zhuǎn)的角度

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

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

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