Web前端开发笔记之CSS拓展04——平面转换、背景渐变、空间转换

1.平面转换 

•  平移

使用技巧：

translate()如果只给出一个值，表示x轴方向移动距离。

单独设置某个方向的移动距离：使用translateX()&translateY()。

• 旋转

 转换原点：

 

用于修改旋转点，此属性需要加在旋转元素上 。

多重转换：

默认以平移、旋转、放大的顺序进行书写，不然会出现奇怪的情况。

原因：旋转优先的化会改变坐标轴向，这样平移的方向就会改变。

一个元素可以加上多个转换效果，比如平移和旋转同时进行。

• 缩放

 2.背景渐变

 3.空间转换

空间位移：

 透视：使用perspective属性实现透视效果

 所谓透视效果就是值人眼到屏幕的适配距离。

空间旋转：

立体呈现：

空间缩放：

一般的，我们在使用空间缩放时是作用在空间体上的，因为单一平面Z轴放大缩小无效。