筆記：
2d變換
transform
位移
translatex() translatey()
簡寫：translate(x值，y值
) 正值向右，負值向左
旋轉 rotate()
rotate(？deg)
括號中為角度值 正值是順時針旋轉，負值是逆時針旋轉
縮放scale()
scale() 括號中為數值，可以為浮點數 如大於
1是放大效果，小於
1是縮小效果
變形（斜切）
skewx() skewy()
簡寫：skew(x軸斜切角度，
y軸斜切角度
)
body:hover div解析順序：根據transform內寫的順序進行解析。
變換原點：
transform-orign:
left right top bottom
center（預設） 當設定相應的值後，會按照相應設定的值發生變換。
3d變換
3d效果：首先給需要進行
3d變換元素的父級新增
3d環境和景深。
寫法：
transform-style:preserve-3d;
perspective:數值; 如：300px; 數值較低的話無效果transform
rotatex 沿x軸旋**正值向右翻轉，負值向左翻轉
rotatey 沿y軸旋**正值向右翻轉，負值向左翻轉
rotatez 沿z軸旋**正值向螢幕外，負值向螢幕內
translatex 沿x軸位移：正值向右，負值向左
translatey 沿y軸位移：正值向下，負值向上
translatez 沿z軸位移：正值向螢幕外，負值向螢幕內
例項**：
1實現效果：滑鼠停留，立方體旋轉。doctype html
>
2<
html
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>3d正方形例項
title
>
6<
style
type
="text/css"
>
7#box
1415
#val
23#val div
31#val div:nth-of-type(1)
34#val div:nth-of-type(2)
40#val div:nth-of-type(3)
46#val div:nth-of-type(4)
52#val div:nth-of-type(5)
58#val div:nth-of-type(6)
62#val:hover
65style
>
66head
>
67<
body
>
68<
div
id="box"
>
69<
div
id="val"
>
70<
div>1
div>
71<
div>2
div>
72<
div>3
div>
73<
div>4
div>
74<
div>5
div>
75<
div>6
div>
76div
>
77div
>
78body
>
79html
>
css3 3d特效彙總
dom結構 figure div span class face hover me span span class face button span div figure 原理 把兩個span弄成方塊，給figure繫結 hover hover 時 div 繞x旋轉 實現效果和 第乙個類似 僅僅是 ...
CSS3 3D轉換效果
css3 中是通過transform style樣式屬性來實現 3d 立體效果的，為父元素設定了該屬性其子元素就會具有 3d 效果，對應的屬性值如下 舉個例子 實現乙個正方體效果 主要是通過父元素的四條邊和前後面來構成正方體的六個面，再結合transform style 平移和旋轉等方法就可以實現。...
css3 3d翻轉效果
3d變換 perspective 透視，視角 屬性定義 3d 元素距檢視的距離，以畫素計。該屬性允許您改變 3d 元素檢視 3d 元素的檢視。決定了你所看到的是2d transform 還是3d transform 視距 perspective 和translatez 視距就是眼睛距離物體原本位置的...