筆記：CSS3製作中軸旋轉立方體

預覽地址-純 CSS 製作繞中軸旋轉的立方體
參考樣例-CodePen 立方體 demo

perspective

設置元素被查看位置的視圖

perspective: number|none;

值	描述
number	元素距離視圖的距離，以像素計
none	默認值。與 0 相同。不設置透視

-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;

---

perspective-origin

設置 3D 元素的基點位置
perspective-origin 屬性定義 3D 元素所基於的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。
當爲元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。

perspective-origin: x-axis y-axis;

值	描述
x-axis	定義該視圖在 x 軸上的位置。默認值：50%
y-axis	定義該視圖在 y 軸上的位置。默認值：50%

-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-ms-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;

---

-webkit-box-reflect

製作倒影效果
不是W3C標準屬性，需帶上瀏覽器前綴

box-reflect:none | <direction> <offset> <mask-box-image>

值	描述
none	默認值，無倒影效果
direction	倒影方向（above：原圖上方，below：原圖下方，left：原圖左側，right：原圖右側）
offset	倒影與原圖之間的距離（像素值/百分比）
mask-box-image	倒影的遮罩效果，背景圖片/漸變生產的背景圖像 可參考鑫大的效果

-webkit-box-reflect: below 170px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0%, transparent), to(rgba(250, 250, 250, 0.1)));

transform-origin

設置旋轉元素的基點位置

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定義視圖被置於 X 軸的何處。可能的值（left/center/right/length/%）
y-axis	定義視圖被置於 Y 軸的何處。可能的值（top/center/bottom/length/%）
z-axis	定義視圖被置於 Z 軸的何處。可能的值（length）

transform-origin:20% 40%;