TAT.bizai 图文理解 CSS3 3D Transform
In CSS3,Web开发 on 2012年11月04日 by view: 14,780
7

Minren哥前面已经写了一些关于这方面的blog了,大家也可以在团队blog里面参考。

http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

介于只是介绍perspective,没有对css 3d transform其他部分属性介绍说明,下面是我个人对css3 3D的一些个人见解,大神们莫喷。那些rotateX啊,scaleY啊这些大家都能够立刻明白的我就不过多的解析了。主要有几个属性大家可能比较少用或没有理解透的为这部分的主要内容。

【perspective和translate】

perspective视距。通常我们使用rotate来做3D旋转的时候,效果不是很明显,总感觉差点什么的。而translateZ更是没有任何的效果。原因是,我们没有为它的父节点添加视距perspective。使用perpective才是真正建立3D 转换的核心元素。

那么perspective是个什么东西,视距就是你看3D物体,眼睛到画布的距离,而translate就是3D物体距离源点的距离,下面引用w3c的图解说一下perspective和translateZ的关系。

 

 

简单的可以得出下面的结论:

1.没有perspective就没有真3D(不是真33D)

2.当perpective的值越小,3D效果就越明显(就是说你眼睛越靠近33D就越3D)

3.当perpective的值无穷大的,值为0,不写perpective,这三种情况的效果一样。

切面效果。什么是切面效果,就是前面我说的不是很明显的3D效果,给个图大家就明白了

几乎平衡的两条视线,使到我们看到的3D好像被水平投影到显示器那样。

 

4.还有种特殊情况,perspective和translateZ的值一样。一图胜万语。

perspective和translateZ值相等,男猪脚看到什么了....

 

【transform-style:preserve-3d】

这个属性有点蛋疼,没有像perspective效果那么明显。顾名思义,是建立一个3D渲染环境。我们来看看w3c的为这个属性的一段说明:

 

· A 3D rendering context is established by a a transformable element whose computed value for transform-style’ is preserve-3d’, and which itself is not part of a 3D rendering context. Note that such an element is always a containing block. An element that establishes a 3D rendering context also participates in that context.

· An element whose computed value for transform-style’ is preserve-3d’, and which itself participates in a 3D rendering context, extends that 3D rendering context rather than establishing a new one.

· An element participates in a 3D rendering context if its containing block establishes or extends a 3D rendering context.

 

简单说:preserve-3d建立的3D渲染环境是对其子节点影响的,使子节点同父节点同一个渲染环境,如果子节点的子节点也带有preserve-3d属性就继承其父节点的。即是建立一个统一的3D渲染环境。那同一个3D渲染环境又如何。我们用个例子来说明:

demo的基本结构和样式如下代码

我们看到,被包含的子节点(红色)使用rotateX,但是没有效果。其实不是没有效果,是效果不明显。子节点(红色)的3D旋转式在容器节点(绿色)的3D渲染环境下发生的。而容器节点没有perspective,效果就为切面效果

我们为容器节点(绿色)增加perspective属性,那样子节点(红色)的rotateX效果就出来了,但是注意,现在我们是拥有2个包含关系的3D渲染环境。但是我觉得这不是你所希望的的(除了你有什么特殊癖好或特殊需求)

当容器节点(绿色)使用【transform-style:preserve-3d】后,容器节点(绿色)建立了3D渲染环境,严格上说是继承了舞台(空边框)的的3D渲染环境。使到子节点的渲染环境都在一个环境上。效果就想我们当初那样了

 

查看Demo页面

 

transform-originperspective-originbackface-visibilty

如果理解好前面几个属性,这几个就非常的好理解了。

Backface-visibilty,就是背面的可见性,默认是可见的。想不可见就写:backface-visibilty:hidden;自己写一下代码就好了.

Transform-origin为源点的位置。Rotatetranslate都是按照默认的源点转变的,可以通过transform-origin来改变这个源点位置。

Perspective-origin为视点的位置。就像上面那张解析perspective图的眼睛的位置。

贞子从你的显示器里面爬出来的时候就有3D效果啦。我们换个视点来一睹贞子姐的容貌

就是perspective-origin: right bottom;

 

【perspective,preserve-3d,translateZ之间关系又是怎么的】

点击理解关系Demo页面

通常我们写CSS3 3D效果的东西,建议html结构为:

舞台 为舞台加上perspective

容器 为容器加上preserve-3d,使到一个容器内为同一3D渲染环境

内容 实际transform效果

结语:

本来好像还要为大家分享一个3D slider的,但是感觉博文略长略长了,分篇幅,下篇博文在分享一下css3 3D的实际使用。

 

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/11/css3-3d-transform/

  1. chieh

    chieh 2016 年 8 月 26 日

    图挂了

  2. 夏子沫 2016 年 1 月 12 日

    真是好人啊~~

  3. 远非远 2016 年 1 月 11 日

    图片没有了

  4. 上坡 2014 年 10 月 23 日

    求图片。。

  5. 大桃子 2014 年 6 月 19 日

    页面上图片路径失效啦!!!!!!!!

  6. TAT.Cson

    TAT.Cson 2012 年 11 月 7 日

    顶个~

  7. sss 2012 年 11 月 4 日

    不错的文章,说明比较细致(貌似我看见了矢吹老湿-_-

发表评论