CSS3 perspective from to透视应用实例

　　在CSS3中，用perspective-origin可制作透视效果，用perspective也可以制作透视效果，二者之间有何不同？perspective-origin可以设置透视源为上、下、左、右，而perspective可以设置从那到那的透视。

　　perspective 放在动画中使用from to可使透视呈现从大到小的动画效果，也就透视动画；从小到大的透视效果似乎不可以。下面先perspective的语法规则，再看具体的主应用实例。

 

　　一、perspective语法规则

　　 perspective：none | <length>

　　 perspective语法规则比较简单，只有两个取值，一个为none，另一个为length。

 

　　二、perspective的取值

　　none：不设置透视，为默认值；

　　<length>：指定观察者距离平面的距离（z = 0），不允许为负值。

 

　　三、perspective应用实例

　　html代码：

　　<ul class="perspective"><li>perspective</li></ul>

　　CSS样式：

<style type="text/css">

.perspective{
 width:250px;
 height:250px;
 border:1px solid #ab9595;

 margin:60px auto;

 perspective:20px;
 transform-style:preserve-3d;
 animation:an-perspective 5s ease-out infinite;

}

.perspective li{
 width:200px;

 height:160px;
 background-color:#e3e2e0;

 margin:20px 1px
 transform:rotatex(90deg);
}

 

@keyframes an-perspective{

 from{
  perspective:20px;
}

 to{
  perspective:150px;
}
}
</style>

　　效果图：

• perspective

　　从效果图中可以看出，一个特别大底部透视形状从大到小变化，最终仍然是一个透视形状。透视形状和方向可任意修改，可修改perspective、rotatex 和 margin 实现。