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位置
動畫3d示例
li>上
li>
<
li>下
li>
<
li>左
li>
<
li>右
li>
<
li>前
li>
<
li>後
li>
ul>
div>
body
>
html
>
結果
動畫示例
doctype html結果>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>demo
title
>
<
style
>
.box
@keyframes animationstyle
25%
50%
75%
100%
}
style
>
head
>
<
body
>
<
div
class
="box"
>
div>
body
>
html
>
css 3d 動畫 相關
transform style preserve 3d 設定3d模式perspective 700px 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身perspect...
css 3d 動畫相關總結
傾斜 transform skew 水平傾斜 transform skew 水平,垂直 transform skewx transform skewy target 選擇器可用於選取當前活動的目標元素。css樣式 圓角 border radius 元素是正方形 寬度的一半px 50 正圓 元素是長方...
css 動畫筆記
用於設定元素的樣式過度 transition property duration timing function delay property 規定設定過渡效果的 css 屬性的名稱 duration 規定完成過渡效果需要多少秒或毫秒，預設0 timing function 規定速度效果的速度曲線 ...