CSS3 03. 3D變換、坐標系、透視perspective、transformZ、transform-style添加3D效果、backface-visibility元素背面可見、動畫animation、@keyfarmes、多列布局

1、左手坐標系

伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

CSS中的3D坐標系

CSS3中的3D坐標系與上述的3D坐標系是有一定區別的，相當於其繞着X軸旋轉了180度，如下圖

左手法則

左手握住旋轉軸，豎起拇指指向旋轉軸正方向，正向就是其余手指卷曲的方向。

透視 perspective

perspective：400px；

電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現，通過透視可以實現此目的。

透視可以將一個2D平面，在轉換的過程當中，呈現3D效果。

注：並非任何情況下需要透視效果，根據開發需要進行設置。

perspective有兩種寫法

a) 作為一個屬性，設置給父元素，作用於所有3D轉換的子元素

b) 作為transform屬性的一個值，做用於元素自身

transform：translateZ（50px）

　　沿Z軸移動，需要給父盒子添加透視 perspective：Number；

 

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D變換/06-3D-translateZ.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D變換/ppp.html

 

3D呈現 transform-style：3d

　　給父盒子添加，讓子盒子存在真3d效果 

　　指定子元素定位在3d空間中

　　flat：默認值，扁平化

backface-visibility：hidden；設置元素背面是否可見

偽元素獲取自定義屬性：  content：attr(自定義的屬性名)

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/01-3D變換/案例/03-反轉文字-練習.html

 

動畫

　　

1、必要元素：

a、通過@keyframes指定動畫序列；

b、通過百分比將動畫序列分割成多個節點；

c、在各節點中分別定義各屬性

d、通過animation將動畫應用於相應元素；

 

2、關鍵屬性

a、animation-name設置動畫序列名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度

　　linear：勻速／ease：減速／ease-in：加速／ease-out：減速／ease-in-out：先加速 后減速

e、animation-play-state動畫播放狀態，running、paused等

f、animation-direction動畫逆播，alternate反向normal正常

g、animation-fill-mode動畫執行完畢后狀態，forwards保持結束后的狀態、backwards等

h、animation-iteration-count動畫執行次數，inifinate等

i、steps(60) 表示動畫分成60步完成

若所有屬性都需要過渡： transition-property: all;

參數值的順序：

關於幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意

http://mingm/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/fishes/02-testfish.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/fishes/01-fish01.html

 案例：

大海波濤

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/大海波濤/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/動態進度條/index.html 

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/動態進度條/index.html 

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/全屏切換/01-全屏切換練習.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/跳動的心/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/無縫滾動/01-無縫滾動-練習.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/宇宙/index.html

http://mingm.cn/demo/09-HTML+CSS3/25-CSS3-第三天/02-動畫/案例/鍾表/index.html 

多列布局 

 column-count ： number

　　number 是幾 就分幾列；

　　chrome不支持

column-rule: 1px dashed red ; 分割線

column-gap: 30px;列間間距

colume-width： 列寬度

column-span：all／none     用於 <H1>標簽 ，標題跨列或不跨列

http://mingm/demo/09-HTML+CSS3/25-CSS3-第三天/03-多列布局/01%20多列布局.htmlmingm/demo/09-HTML+CSS3/25-CSS3-第三天/03-多列布局/01%20多列布局.html