CSS3 perspective-origin

转载自：http://www.softwhy.com/article-919-1.html

建议首先阅读CSS3 perspective一章节， 下面进入正题。

perspective-origin属性设置perspective属性源点的角度。

关于transform变换更多内容可以参阅CSS3 2D/3D转换一章节。

语法结构

 
 

  
  
perspective-origin: x-axis y-axis;
 
 

参数解析:

（1）.x-axis:定义视图在x轴上的位置。默认值是50%；可以是left、center、right、length和%形式。

（2）.y-axis:定义视图在y轴上的位置。默认值是50%；可以是left、center、right、length和%形式。

可能的参数值形式:left、center、right、length和%。

看了上面的介绍可能还是不够清晰，没有能在大脑中形成一个清晰的概念，那么看下面这张图片:

下面对以上图片做一下简单介绍:

（1）.灰色部分就是我们要看的物体。

（2）.橘红色部分就是perspective属性设置的查看位置。

（3）.红色中心点就是默认的perspective-origin属性值所在位置。

观察物体的时候，并非都是从中心点看过去，可能要换个角度，那么就可以沿着x轴或者y轴更换一个角度。

如果上面说的还不够清楚，再来看下面的图:

上面的图片表示默认的观看角度，下面调整一下角度:

上面的图片向上提高了一下坐标，这样应该比较清晰了。