「CSS3 」3D效果 & 透视

随着浏览器的不断进步和更新,许多的新特性也崭露头角。
许许多多以前需要用 gif 图片或者是 flash 实现的效果,现在使用 CSS 就可以实现了。消耗部分计算能力,从而大大减少了流量的交换。

今天要介绍的是 CSS3 中的3D效果,以及非常新的透视功能。

3D变换效果

CSS3 的3D效果是使用 transform 属性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法进行设置的。

一个元素如果进行3D变换,它在3D空间的初始位置是这样的:
图片描述

上图使用了立方体来更好的说明位置,如果只是单单一个元素的话,它的形状是一个平面区域。

下面来分别介绍一下 transform 属性的3D相关方法。由于这些方法非常易于理解,所以我不赘述。

rotateX (Y, Z)

这个方法使得元素绕着X、Y或Z轴进行旋转,需要注意的是,所有的旋转都是以顺时针方向为正方向。

translateX (Y, Z)

translateXtranslateY 和2D空间的平移是一样的,重点说一下 translateZ

由于默认开启的是平行投影,所以当你更改一个元素的Z值的时候,视觉上没有任何变化。如何开启透视投影?不急,先慢慢看,后面会介绍到。

scaleX (Y, Z)

在X、Y或Z轴上对图像进行缩放,不多说。


CSS属性: transform-style

!这是一个非常重要的属性,值可以是:

  • flat(default)

  • preserve-3d

这里许许多多的文章都没有说清楚,不才在这里尝试解释一下。

设置了 preserve-3d 属性的元素会生成一个3D的空间,将所有的子元素(不是后代元素)都囊括在这个3D空间内。
对于父元素的 transform 属性,会应用到生成的3D空间中,对整个空间进行缩放,平移,旋转。
最后将所有的元素平行投影到屏幕上(不是父元素)。

请自己看上面的一段文字,如果能够理解,那么尝试分析 flat
子元素并没有在父元素的3D空间内,它们独立的,各自做自己的3D变换,然后按照先后次序(即translateZ无效)投影到父元素(不是屏幕)上。
由于所有的子元素都投影到父元素上,那么父元素的 transform 属性在视觉效果上是对父元素这个平面区域进行的。

// DEMO:case1
图片描述

通过这个DEMO我们可以看到 flatpreserve-3d 的区别,更加理解上面的文字。

transform: translateX(10px) rotateZ(90deg);

你以为是先平移10px再相对于以Z轴为旋转轴旋转90度吗?
其实并不是,tranform 的属性是从右边的方法依次应用到左边的方法的。

/*
 * 中场休息: 先好好消化一下上面的内容吧!
 */

透视投影

透视投影模拟人眼的图像观察方式,这种方式能够对物体的远近,方位进行判断,从视觉上来说更加接近人类所熟悉的效果。

perspective: none | <length>;
transform: perspective(<length>) method(p) method(p) ...;

第一种方法: 将 perspective 属性更改为 >0 的数值,便可以将这个空间设置为透视投影,即所有子元素(仅仅是, 不包括自身)的投影到屏幕的方式变为透视投影。

第二种方法: 将perspective(<length>)方法加入到元素的transform 属性的第一个(即最后应用),便可以将这个元素(仅仅是这个元素)开启透视投影。

注意,这个透视投影的像平面和Z=0平面是重合的,原理图如下:
图片描述

其中,焦点到z=0平面的距离是 perspective 的值。
从上图我们可以看出,当 perspective 的值越小的时候,Z值对于视觉效果的影响更加强烈,越大的时候,Z值对于视觉的影响更加细微。一般来说,在500px到1000px的时候视觉上更加合理。

当元素的Z值使得元素在焦点之后,元素则不会被捕捉到。

// DEMO: case2(perspective: 500px;)
图片描述

可以自己思考一下,左图中为什么上下两个面会显示。(画出它的投影)


我们还可以调整焦点的位置(默认在中心):

perspective-origin: x y;

其中x的值可以是: 长度、百分比,left(相当于0)、center(相当于50%, 默认)、right(相当于100%);
其中y的值可以是: 长度、百分比,top(相当于0)、center(相当于50%, 默认)、bottom(相当于100%)。

// DEMO: case3(perspective-origin: 0 0;)
图片描述

DEMO

[重要提示]请不要忘记推荐收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 3D效果 & 透视

阅读 10.6k

推荐阅读
Jasonの前端地界
用户专栏

作者在前端学习路上的知识总结。

43 人关注
14 篇文章
专栏主页