3D在2d的基礎上添加 z 軸的變化
- 3D 位移：在2d的基礎上添加 translateZ（），或者使用translate3d（）
- translateZ（）：以方框中心為原點，變大
3D 縮放：在2d的基礎上添加 scaleZ（），或者使用scale3d（）
- scaleZ（）和 scale3d（）函數單獨使用時沒有任何效果
3D 透視：perspective 規定3D元素的透視效果
- 可以取值為none或不設置，這種情況下說明沒有透視效果
- 取值越小，3d效果越明顯
3D背面可見：backface-visibility 定義元素在不面對屏幕時是否可見
- transform-style：規定被嵌套元素在3D空間中顯示
- transform-style：flat；子元素將不保留其 3d 位置
- transform-style：preserve-3d；子元素將保留其3d位置
動畫
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
css中通過 @keyframes 規則是創建動畫，可以改變任意多的樣式任意多的次數。
當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效果。
指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：
規定動畫的名稱
規定動畫的時長
語法：@keyframes styleName {
keyframes-selector{css-style;}
}
keyframes-selector：可以用百分比來規定變化發生的時間
也可以用關鍵詞 "from" 和 "to"
0% 是動畫的開始，100% 是動畫的完成
3D示例
Document
- 上
- 下
- 左
- 右
- 前
- 後
結果
動畫示例
Demo
結果
“我們相信人人都可以成為一個WEB前端開發大神，現在開始，找個師兄，帶你入門，學習的路上不再迷茫。這裡是WEB前端開發修真院，初學者轉行到互聯網行業的聚集地。"
大師兄送你套WEB前端入門心法，關注小編私信【前端】，免費領取WEB前端學習資料從最基礎的HTML+CSS+JavaScript [炫酷特效，遊戲，插件封裝，設計模式]到移動端的項目實戰的學習資料都有整理，送給每一位前端小夥伴。
分享到:
