点击上方“Web前端进阶指南”关注我呦

跟程序员小强一起学前端

上一篇我们讲述了CSS3的基础部分。包括边框、圆角、背景、渐变、文本效果、字体等内容，接下里我们来看看CSS的高级部分，包括CSS3 2D/3D转化、过渡、动画等内容，通过这些知识点我们学会如何简写一些简易效果，话不多说，接下里我们看看些简易效果，话不多说，接下里我们看看。

CSS3 2D转化

转化就是说让某个元素改变形状、大小和位置，不管使用2D还是3D都能达到这些转化效果，同样的，支持主流浏览器，但注意加上前缀 -webkit- 、-ms- 、-moz- 等。所谓的2D就是在空间X轴和Y轴上进行相应的变化。

目前主要的2D变化方法有以下几个：

• translate()
• rotate()
• scale()
• skew()
• matrix()

我们挨个来看一看这些方法：

1、translate() 方法

这个方法呢，就是根据方法里给定的参数值从当前元素进行移动，参数值有两个，分别为X轴、Y轴，在开发中，hover上用的比较多，例如：

可实现的效果如下：

2、rotate() 方法

这个方法式让一个元素根据给定的值进行旋转，正值就表示顺时针旋转，负值就表示逆时针旋转，也很简单的，也是一般在hover上用的比较多，例如：

可实现的效果如下：

3、scale() 方法

该方法呢，是将原来的元素按给定的参数值进行缩小或放大的，可以是一个值，同比例缩放，也可以是两个值，宽度（X轴）和高度（Y轴）按这两个参数进行宽高缩放，在开发中，我们用一个值进行在hover缩放比较多，例如：

可实现的效果如下：

4、skew() 方法

这个方法是让某个元素根据给出的参数分别在X轴和Y轴方向发生倾斜，基础语法为：

transform:skew(参数1，参数2);

• 参数1表示只在X轴(水平方向)倾斜。
• 参数2表示只在Y轴(垂直方向)倾斜。

例如：

可实现的效果如下：

5、matrix() 方法

这个方法呢，就是综合了一下上述的那几个方法，matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。例如：

可实现的效果如下：

注意：在2D转化过程中，不管方法里的参数是一个还是两个，都能进行转化。但单独对X轴还是Y轴进行转化时定义的属性却不同，例如：

• translateX(n)：定义 2D 转换，沿着 X 轴移动元素。
• translateY(n)：定义 2D 转换，沿着 Y 轴移动元素。
• scaleX(n)：定义 2D 缩放转换，改变元素的宽度。
• scaleY(n)：定义 2D 缩放转换，改变元素的高度。
• skewX(angle)：定义 2D 倾斜转换，沿着 X 轴
• skewY(angle)：义 2D 倾斜转换，沿着 Y 轴。

CSS3 3D 转换

所谓的3D转化是在原有的2D转化的基础上，加了一个Z轴，另外加了一些转化属性，下面来看看其中的一些转化方法：

• rotateX()
• rotateY()

1、rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。例如：

2、rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。例如：

3、rotateZ() 方法

rotateY()方法，围绕其在一个给定度数Z轴旋转的元素。例如：

4、transform-style属性

transform--style属性指定嵌套元素是怎样在三维空间中呈现，值呢，有两个值：

• flat：表示所有子元素在2D平面呈现。
• preserve-3d：表示所有子元素在3D空间中呈现。

5、perspective属性

这个属性规定3D元素的透视效果，就是说我们从那个角度去看一个元素，好比说一个立体图，我们可以看他的斜视图，俯视图，侧视图等，perspective它就可以让我们实现这样的效果。

例如：

值有两个，一个是自定义，一个是自定义数值，上图中的500就表示元素距离视图的距离，以像素计。

6、perspective-origin属性

perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。例如：

可实现的效果如下：

注意：在3D转化中，像translateZ(z)、scaleZ(z)、rotateZ(angle)，都可以通过Z轴给定的值定义3D的转化，也可以是三个值间的转化。例如：translate3d(x,y,z)、scale3d(x,y,z)、rotate3d(x,y,z,angle)等来定义3D转化。

CSS3 过渡

其实这个过渡呢，就已经很接近我们动画了，它呢，就是我们添加某种效果后，可以从一种样式转换到另一种样式。其实，使用它的时候你只需要规定添加的效果和时间就行，下面我们来看看：

在实现这一简单的过渡，我们需要去触发它，我们用hover，当鼠标指针悬浮(:hover)于 <div>元素上时，我们添加了宽度，高度和转换效果，例如：

在过渡的时候，我们有必要去了解一些过渡属性：

• transition：简写属性，用于在一个属性中设置四个过渡属性。
• transition-property：规定应用过渡的 CSS 属性的名称。
• transition-duration：定义过渡效果花费的时间。默认是 0。
• transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
• transition-delay：规定过渡效果何时开始。默认是 0。

用起来也不是很难，属性值也不是很多，例如：

你也可以简写：

代码比起来就少了很多，如果你不了解这些属性值也会相当麻烦的。

CSS3 2D/3D转化、过渡就说到这里，其实很简单，掌握了属性及其属性值后，直接往方法里扔就行，下一篇呢，我们着重来说CSS3动画，这也是CSS3最有趣的地方啦。

本文为‘Web前端进阶指南’原创，转载请说明出处，手动码字不易，喜欢的小伙伴们别忘了顺手点个赞加个关注哈，有什么不懂的下方留言评论或私信。谢谢大家哈！