CSS3 3D转换中用perspective实现不同角度查看元素

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实现不同角度查看元素，快去试试吧。