预览地址-纯 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%;