css 空间变换

这篇文章是我学习 css 空间变换的一篇学习笔记。css 提供了一系列强大的方法，能产生几乎任何能想到的空间变换效果。

借助笛卡尔坐标系，空间向量 两者，能精确的定位和确认方向，这是我认为掌控 css 空间变换的重要前置知识。如果不懂这两者，理解这边的概念就需要一定的成本了。

css 默认的坐标系

• 元素中心为原点
• 向着右边是 X 轴正方向
• 向着下边是 Y 轴正方向
• 由屏幕指向用户的方向是 Z 轴的正方向

平移和视距

平移

css 里的变换几乎都是靠 transform 属性实现的。位置平移则是依赖于 translate() 函数。

transform: translate3d(x, y, z); /* 要使用此函数，三者必须都指定 */
transform: translateX();
transform: translateY();
transform: translateZ();

这几个函数能实现元素位置的移动，取正即是向着正方向移动。
如果取百分比，则是移动元素自身宽度或者高度的百分之多少。

视距

默认情况下，z 轴方向的平移看不出效果，我们需要加一个视距：

perspective: 距离值;

• 作用：指定了观察者与 Z=0 平面的距离，为元素添加近大远小、近实远虚的透视效果

• 属性：添加给父级，取值范围 800px - 1200px 比较合适

在某些情况下，视距的出现会让你的布局展示出现意外效果。实践中可以尝试添加或者移除，自行感受。

旋转

用法和一些说明

指定了绕着某条轴旋转的角度，正数则是顺时针方向。
默认建系建在了元素的中心，坐标系的原点在元素的几何中心，轴也就在元素的宽度或者高度一半的位置。
以旋转 60 度为例：

transform: rotateX(60deg);
transform: rotateY(60deg);
transform: rotateZ(60deg);

其中绕着 Z 轴旋转的效果，看起来和 transform: rotate(60deg); 好像没区别。这是因为默认的坐标原点在元素的几何中心。

左手法则

一种能快速辨认旋转效果的方法，是利用左手法则。

大拇指指向坐标轴的正方向，四指的方向就是旋转的方向啦。

向量加上改变坐标原点，精确控制旋转方向

这个可以定义坐标系原点的位置：

transform-origin: 50% 50%; /* 默认值是 50% 50%，也就是在元素的中心 */

这个可以定义旋转的向量方向：

transform: rotate3d(1,0,0,60deg); /* 这样设置相当于 rotateX(60deg)  */

其中前面的三个坐标定义了一个空间向量，最后一个值定义了旋转的角度。

有了空间向量加上可变换的原点，现在是要怎么转就能怎么转了。数学真是个好东西，美！

立体呈现

作用：设置元素的子元素是位于 3D 空间中还是平面中

/* 子元素在平面中  */
transform-style: flat; 

/* 子元素在 3D 空间中  */
transform-style: preserve-3d;

如果选择平面，元素的子元素将不会有 3D 的遮挡关系。

由于这个属性不会被继承，因此必须为元素的所有非叶子子元素设置它。