从零开始学 Web之CSS3（五）transform属性

大家好，这里是「从零开始学 Web 系列教程」，并在下列地址同步更新……

github：https://github.com/Daotin/Web

博客园:http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

transform

字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：移动 ，缩放，旋转，翻转，改变旋转轴心等。

1、元素的移动：translate

作用：使用transform实现元素的移动

语法：

注意：

1、移动是参照元素的左上角 ；

2、执行完毕之后会恢复到原始状态。

2、缩放：scale

作用：实现缩放（参照元素的几何中心）：1指不缩放，>1.01放大，

语法：

3、旋转：rotate

作用：实现元素的旋转。

语法：

4、翻转：skew

作用：实现元素的翻转

语法：

5、改变旋转轴心

语法：

6、同时添加多个transform属性值

注意：

1、transform 多个属性分开写的话，后面的属性会覆盖前面的，一定要合并起来写。

2、会出问题，因为旋转会将坐标系旋转，所以先移动再旋转。

案例：旋转轴心案例

效果：鼠标放在图形上，图形旋转，鼠标移开，图形回归原状。

案例：图形打散

效果：鼠标放到图形上，图形打散，鼠标移开，图形归位。

案例：脱标流盒子居中

我们之前也学过脱标流盒子的居中问题，当时做的是先移动父盒子的 50%（比如：left：50%），再往相反方向移动子盒子的 50%（比如：margin-left：100px;）。大家可以看到，子盒子的移动只能写具体的像素值，而不能写 -50%。如果子盒子的大小改变了，就需要重新计算。

这里可以使用： 和 就可以解决。

示例：

7、3d三维变换

语法：

案例：立方体

8、景深/透视效果

当时，相当于没有设置，没有设置的时候，视角位于3D的几何中心位置，相当于在

盒子内部往外看;

当perspective的值大于中心到各个平面的距离时，相当于出了盒子看。

语法：

欢迎关注

Web前端之巅

念念不忘，必有回响。