从头开始复习css之2D变换

最近一直在系统的复习前端基础知识， 不复习的时候不知道 一旦系统的复习才知道 原来自己对很多知识还是处于一知半解的地步，好吧 话不多说 开始写吧：

一、 过渡

1.1、 过渡是什么？

首先关于过渡，过渡是一个什么东西呢？我感觉用语言来描述是很苍白的，我们直接来看下面一段代码：

// css
.test {
  width: 200px;
  height: 200px;
  background-color: red;
}
.test:hover {
  height: 400px;
}
// html
<div class="test"></div>

代码的意思是在鼠标放在元素上面的时候，就会改变元素的高度，具体的效果如下：

我们发现：在鼠标hover的时候，元素一瞬间高度变化，紧接着我们在其基础上面增加过渡的代码：

transition: height 2s;

效果如下：

从上面的效果，我们可以看出来没加过渡和加过渡的之后的效果差距，过渡效果就像在变换的过程中增加缓冲效果，也就是说过渡就是元素从一种样式逐渐改变为另一种的效果。

1.2、 介绍过渡可选用的属性

那么关于过渡，需要掌握的知识点有哪些呢？

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

1.3、 transition-property

transition-property属性规定应用过渡效果的css属性的名称，当指定css属性值发生改变的时候，过渡效果将会触发。
其可选值是：

• **none：**没有属性会触发过渡效果
• **all：**所有的属性变化都会触发过渡效果
• **property：**定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。

1.4、 transition-duration

transition-duration属性规定完成过渡效果需要花费的时间。默认值是0.

1.5、 transition-timing-function

transition-timing-function属性规定过渡效果的速度曲线。其可选值有：

• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• **ease ** 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  这里值得我们注意的是：最后一个速度的值可以在赛贝尔曲线官网上自行选取。

1.6、transition-delay

transition-delay 属性规定过渡效果何时开始。通俗点说就是设置变换的延时时间。

1.7、 来搞个例子吧

说了这么概念性的问题，接下来看一段代码：

// css
		.runn-area{
			background: skyblue;
			padding: 2px 4px
		}
		.runn-area:hover>.test{
			transform: translateX(80px);
		}
		.runn-area:hover>.test3{
			transform: translate(80px,0) rotate(360deg);
		}
		.test {
			width: 12px;
			height: 12px;
			background-color: red;
			transition: height 2s;
			margin-top: 10px;
			color:white;
			font-size: 12px
		
		}
		.test1 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease;
			transition-delay: 0.5s;
		}
		.test2 {
			transition-property: width;
			transition-duration: 1s;
			transition-timing-function: linear;
			transition-delay: 0.5s;
		}
		.test3 {
			transition-property: all;
			transition-duration: 1s;
			transition-timing-function: ease-in-out;
			transition-delay: 0.5s;

		}
		.test4 {
			
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: cubic-bezier(0,.67,.87,.06);
			transition-delay: 0.5s;

		}
		.test5 {
			transition-property: transform;
			transition-duration: 1s;
			transition-timing-function: ease-out;
			transition-delay: 0.5s;
		}
// html
	<div class="runn-area">
		<div class="test1 test"></div>
		<div class="test2 test"></div>
		<div class="test3 test"></div>
		<div class="test4 test"></div>
		<div class="test5 test"></div>
	</div>	

效果如下：

上面我们分别用了不同的transition-property给大家一个不一样的速度感受，能让大家更好的去理解transition-property这个属性。值得我们注意的是：test2元素并没有过渡效果，这里我们发现指定的width，而元素产生的变化确实做的平移变换，所以没有了效果。test3既有平移效果，也有旋转效果，如果想有多种效果的话，用空格做分隔，只要transition-property支持该属性就能被触发。

二、 2d变换基础方法

前面在我们的过渡中用到了一个平移的方法，那么我们肯定不能只满足于平移，肯定还想知道更多平面上的变换动画。

2.1、 2d平面基础中有哪些办法：

关于平面2d变换中 主要有一下几个方法：

• translate：平移
• scale： 缩放
• rotate：旋转
• skew： 倾斜

2.1、 translate

首先关于关于translate这个方法而言，本身就有两个子方法：

• translateX 这个方法只有一个参数，表示沿x轴的平移量
• translateY 这个方法也只有一个参数，表示沿y轴的平移量
  而translate是上面两个方法的简写形式，可以接收两个参数，前者是x轴的平移量，后者是沿y轴的平移量。如果只传一个值，缺省值默认为0。具体的代码,前面代码、效果已经展示过了我就不多说了。

2.2、 scale

关于scale来说而言，本身也有两个子方法：

• scaleX：定义 2D 缩放转换，改变元素的宽度。
• scaleY：定义 2D 缩放转换，改变元素的高度。
  而 scale是上面两个方法的简写形式，可以接收两个参数，分别代表改变元素的宽度和高度。来看下面一个一段代码：

<div class="test"></div>
		body:hover>.test{
			transform: scale(4,4);
		}
		.test{
			width: 100px;
			height: 100px;
			background-color: red;
			transition: transform 2s
		}

2.3、 rotate

rotate主要用来定义 2D 旋转，在参数中规定角度。修改一下上面的代码

		body:hover>.test{
			transform: rotate(360deg)
		}

效果如下：

2.4、 skew

关于skew来说而言，本身也有两个子方法：

• skewX：定义 2D 倾斜转换，沿着 X 轴。
• skewY：定义 2D 倾斜转换，沿着 Y 轴。
  而 skew是上面两个方法的简写形式，可以接收两个参数，分别代表改变元素的沿着x,y轴的倾斜角度。修改一下上面的代码：

		body:hover>.test{
			transform: skew(60deg,60deg);
		}

效果如下：

这里值得我们的注意的是沿着哪个轴倾斜，就是被倾斜边与坐标轴之间的夹脚的角度。

三、原点位置

我们这里有这样一个需求：就是在我们的旋转操作中，我们不希望从，从元素的中心点开始旋转，这就触发了我们接下来的一个属性：transform-origin。我们还是老样子，修改一下上面的的代码来演示这个属性的作用：

		.test{
			width: 40px;
			height: 40px;
			background-color: red;
			transition: transform 2s;
			transform-origin: 0 0;
		}
		.body:hover>.test{
			transform: rotate(360deg);
			background-color: white;
		}

效果如下：

从上面的效果图我们可以发现，该属性是用来更改一个元素变形的原点。
该元素在平面上可以接收两个值，代表变换的中心点（用x-axis和y-axis来表示），其可选用的格式类型有：
x-axis:定义视图被置于 X 轴的何处。可能的值：
|left|center|right|length|%|默认值50%
y-axis:定义视图被置于 Y 轴的何处。可能的值：
|top|center|bottom|length|%|默认值50%

四、 矩阵变换（matrix）

最后我们来说一说矩阵变换吧，这是一个比较复杂的章节。

4.1、 矩阵变换的原理

首先matrix函数接收6个参数，我们就用a,b,c,f,e,f来指代，将这6个参数组合成矩阵如下：

其中矩阵变换的原理是：

x，y表示变换前元素某一点在局部坐标系中的横纵坐标。x’，y’ 表示变换后的坐标。其转化的公式为：

x' = ax + cy + e
y' = bx + dy + f

通过上面的计算方法我们就能计算出a,b,c,d,c,e,f的值 然后填写进去就行了。

4.1、用矩阵变换实现平移变换

问题：我们想让基点为(10px,10px)的元素平移到（30px,30px）。

这里值得我们注意的点就是：让 a=1,b=0,c=0,d=1的情况下，e，f就相当于translate的两个参数。
经过计算 e=20,f=20。

4.2、用矩阵变换实现缩放变换

问题：我们想让元素的宽度成为原来的2倍，宽是原来的3倍？
同样值得我们注意的是：只要让 b = 0，c = 0，e = 0，f = 0，那么 a，d 就相当于scale()的两个参数
经过计算得到 a=2,d=3

4.2、用矩阵变换实现旋转变换

问题：我们想让元素旋转指定度数怎么做？
我们这里的计算公司相当于：

x' =x*cosθ - y*sinθ
y' =  x*sinθ + y*cosθ

值得注意的一点是旋转度数的时候，直接将a = cosθ，b = sinθ，c = - sinθ ，d = cosθ， e = 0,，f = 0

这里值得我们深度深思的是，旋转360度 如何做呢？

4.2、用矩阵变换实现倾斜变换

这个的计算公式相当于
x’ = x + ytanθx
y’ = xtanθy + y

值得注意的一点是旋转度数的时候，直接将a = 1，b = tanθy，c = tanθx，d = 1， e = 0,，f = 0

4.3、总结

总的来说呢，关于矩阵变换的最佳记忆方式可以用下面的方式来记忆：
a 水平缩放，b 水平倾斜，c 垂直倾斜，d 垂直缩放，e 水平移动，f 垂直移动

说在最后

关于过渡和2d动画这一块，我觉得应该是每个前端工程师必须熟练使用的东西，怎么说呢？现在的app 要想使用户体验更加的友好 最好的方式就是给界面转换、数据加载加上一个缓冲页面 而不是干巴巴的纯数据展示，这样不仅对用户，而且对自己审美也是一种很好的享受。好了 好了，不多说了，终于写完了，都快12点半了，我先睡觉了

最后最后提到一句，欢迎大家点赞，关注我的个人博客，我会源源不断的输出高质量文章的。