CSS3 perspective-origin上下左右透视应用实例

　　透视效果既可使形状或文字在一边缩放，又可使它们沿某一个方向倾斜，CSS3出现之前也只能在像Photoshop这样的设计软件中实现；CSS3新增perspective-origin属性后，在网页中也能制作 div、ul li 与文字等对象的倾斜效果了。

　　perspective-origin 也可以既能使对象上下透视，也能使对象左右透视；不过仅 perspective-origin 无法完成透视，还要借住旋转属性，具体的看文章后面的应用实例，现在先看它的语法规则。

 

　　一、perspective-origin语法规则

　　 perspective-origin：[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ] ?

　　 表达式中共有两组值，如果只提供一组值，默认用于横坐标，纵坐标默认为center；如果提供两组值，第一组值用于横坐标，第二组值用于纵坐标。第一组值设置透视点的横坐标为左右，第二组值设置透视点的纵坐标为上下；也就是设置左右透视和上下透视。

 

　　二、perspective-origin的取值

　　<percentage>：用百分比设置透视点坐标值，可为负值；

　　<length>：用长度设置透视点坐标值，也可为负值；

　　left：设置透视点的横坐标为left；

　　第一个center：设置透视点的横坐标为center；

　　right：设置透视点的横坐标为right；

　　top：设置透视点的纵坐标为top；

　　center：设置透视点的纵坐标为center；

　　第二个bottom：设置透视点的纵坐标为bottom。

 

　　三、perspective-origin上下左右透视应用实例

　　html代码：

　　<ul class="perspective">

　　　　<li class="perspective-top"><div class="top">上透视</div></li>

　　　　<li class="perspective-bottom"><div class="bottom">下透视</div></li>

　　　　<li class="perspective-left"><div class="left">左透视</div></li>

　　　　<li class="perspective-right"><div class="right">右透视</div></li>

　　</ul>

　　CSS样式：

<style type="text/css">

.perspective{overflow:hidden;}

.perspective li{width:150px;height:100px;float:left;margin-right:4px;border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;perspective:160px;transform-style:preserve-3d;}

.perspective li.perspective-top{perspective-origin:top;}

.perspective li.perspective-bottom{perspective-origin:bottom;}

.perspective li.perspective-left{perspective-origin:left;}

.perspective li.perspective-right{perspective-origin:right;}

.perspective div{width:120px;height:80px;background-color:#9aacd6;}

.perspective div.top{transform:rotatex(60deg);margin:4px 15px;}

.perspective div.bottom{transform:rotatex(120deg);margin:20px 15px;}

.perspective div.left{transform:rotatey(90deg);width:80px;margin:10px 0;}

.perspective div.right{transform:rotatey(90deg);width:80px;margin:10px 45px;}

</style>

　　效果图：

• 上透视
• 下透视
• 左透视www.liangshunet.com
• 右透视

　　透视形状可以随意改变，作适当调整即可，主要调整旋转角度（rotatex 或 rotatey）。