css3 tranform perspective属性

perspective 属性用于规定观察点距离元素的距离,

1 观察点距离元素越近,元素变形就越大,灭点距离越近。

2 观察点距离元素越远,元素变形越小,灭点距离也就越远。

比如设置perspective属性值为1200px,那么就是观察点距离元素的距离是1200px.需要注意的是,此值是给解析器看的,生成具有立体效果图形,而不是说让你距离屏幕1200px去观察;视点的位置可以结合perspective-origin属性进行调整;

perspective属性的使用还要有如下几点需要注意:

1此属性在舞台元素上设置,对进行3D变换的子元素生效;

2 如果子元素不是3D变换元素,那么没有任何效果。

3 与persperctive(n)作用相同;区别在于应用的元素对象不同,此元素直接应用于当前元素,perspectiive(n)应用于当前元素的舞台元素也就是当前元素的父元素;

使用perspective属性实现3D效果demo 见 css3 利用perspective实现翻页效果和正方体 以及翻转效果

posted on 2019-05-09 11:26  半夏微澜ぺ  阅读(386)  评论(0编辑  收藏  举报