TAT.Minren CSS3 Transform的perspective属性
In CSS3,HTML5,Web开发 on 2012年10月29日 by view: 25,981
17

以下两行语句有什么区别?

如果大家不清楚,请听我娓娓道来。

CCS3中的Transform是设置界面样式和动画的一大利器。而且在Chrome和FF中还支持3D变换。IE9不支持,IE10支持。

只要是3D场景都会涉及视角问题和透视的问题。在Transform中的设置方法比较简单:

  1. 只能选择透视方式,也就是近大远小的显示方式。
  2. 镜头方向只能是平行Z轴向屏幕内,也就是从屏幕正前方向里看。
  3. 可以调整镜头与平面位置:
  • a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示,镜头距离元素表面的位置是300像素。
  • b) perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

下面用一个正方体(或者说骰子)向大家演示视角不同视角(perspective 以及 )的差别。

镜头距离z=0平面的不同距离的效果。

镜头在z坐标固定时,x和y坐标(perspective-origin)变化时的差别。

 

 

使用CSS3进行3D变换很简单。

例如:让一个Div沿Y轴旋转一个角度:

上面的原始的Div和图片,下面是旋转后的效果。

第一张图是原始状态的DIV,第二张图是旋转后的效果。

 

是不是效果不明显?这是因为镜头离平面太远了,所以旋转效果不明显。现在我们试试perspective属性。我们设置perspect=400px。

 

 

怎么样现在效果明显了吧。这就是perspective的用途。

 

不过在chrome中发现一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。如果代码写成下面的情况,perspective的设置会无效。

 

在FireFox中也是这种情况。

 

在mozilla的文档上也没有说明这个情况。现在还不确定是设计如此还是Bug。总之大家用的时候就将prespective放在前面好了。

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

  1. 3D 视差效果 — 好JSER 2016 年 12 月 20 日

    […] 深入了解去看这个文章CSS3 Transform 的 perspective 属性,时间比较久但是很经典,除了兼容性描述有变其它描述很准确。 […]

  2. mark 2016 年 6 月 2 日

    默认值是多少,这个是关键

  3. 董红岩 2016 年 5 月 30 日

    好野

  4. 基于CSS3实现的纸飞机折叠飞翔动画过程 - 轩枫阁 – 前端开发 | web前端技术博客 2015 年 5 月 12 日

    […] CSS3 Transform的perspective属性:http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/ […]

  5. skypp 2014 年 9 月 9 日

    看完了,表示明白了些,但又发现更多疑问。国内没一个地方能说浅显明白的

  6. Mark 2014 年 8 月 20 日

    那perspective不设置,默认值是多少?

  7. cnPolan 2012 年 11 月 11 日

    讲的很容易理解,thx very

  8. Windows8的WPF技术与HTML5的比较 | Tencent AlloyTeam 2012 年 11 月 9 日

    […] 9. Transform      WPF只支持2D的translate,rotate,skew,scale。HTML5可以支持3D的rotate和translate。但正如第八点提到的,WPF有专门的3DAPI,操作也不复杂。     CSS3中的transform属性有一些特别,它的translate、rotate、scale表示的不是状态而是操作,所以 最终效果受书写顺序的影响。而且perspective的位置也一定要写在最前面才有效。具体请参考以下两篇博文: CSS3 的 roate 与 rotateX 的顺序研究 CSS3 Transform的perspective属性 […]

  9. HTML5 CSS3 transforme's roatae and ratateXj | Tencent AlloyTeam 2012 年 11 月 8 日

    […] 我觉得CCS3的transform中的学问很深,可以出不少面试题了。之前的文章谈到过perspective属性的位置问题。 […]

  10. koala 2012 年 10 月 30 日

    我本地测试 也是生效的哦。chrome 22.0.1229.94 m

    • koala 2012 年 10 月 30 日

      <div id=”animateTest” style=”-webkit-transform: rotateY(40deg) perspective(400px);”>

      • koala 2012 年 10 月 31 日

        抱歉,看错了。在safari的开发文档里确实有写:The perspective() transform function must be the first function in the list of transforms—you must establish the perspective prior to applying the other transforms.
        In almost all cases, it is better to create a 3D container and set the -webkit-perspective property for the container element than it is to apply the perspective() transform to an element directly
        所以,这不是bug。按照上面的建议,多创建个容器还是比较靠谱的。不过具体还得看需求怎么样,呵呵~~

        • TAT.Minren

          TAT.Minren 2012 年 11 月 8 日

          文档链接给一下。
          另外我测试了在容器上设置perspective好像不起作用。你测试过吗?

          你可以用我的动画库试试:https://github.com/AlloyTeam/JXAnimate

  11. lightning 2012 年 10 月 29 日

    讲解很详细

    • nice 2012 年 11 月 1 日

      right

发表评论