perspective 多角度查看元素
开发工具与关键技术：DreamWeaver perspective属性
作者:听民谣的老猫
撰写时间：2019/2/1 14:15
我们经常会以九宫图的方式去展现一些照片:
上面是九宫图最普遍的一种展现方式了，看多了?看腻了?
试试换不同方式不同角度去展现这组九宫图:
这种重叠效果不是旋转，扭曲做出来的。它只是改变了你看这组九宫图的角度，通过使用css3 3D转换中用perspective属性来营造一种不同角度的视图感。
.design{
width: 300px;
height: 200px;
margin-left: 550px;
margin-top: 200px;
perspective: 400px;
}
只需要在css样式中添加perspective属性就可以达到上面的效果，不同的赋值就是不同的角度。
- 用处：设置从何处查看一个元素的角度
- 并不是使用浏览器都可以使用perspective属性
- 属性定义及使用说明
1 ：多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
2：定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
| 默认值： | none |
|---|---|
| 继承： | no |
| 版本： | css3 |
| JavaScript 语法： | object.style.perspective=500 |
- 语法
perspective: number|none
| 值 | 描述 |
|---|---|
| number | 元素距离视图的距离，以像素计。 |
| none | 默认值。与 0 相同。不设置透视。 |
简单理解就可以快速运用CSS3 3D转换中用perspective实现不同角度查看元素，快去试试吧。