笔记：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%;