从头开始复习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.二、 介绍过渡可选用的属性

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

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

1.三、 transition-property

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

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

1.四、 transition-duration

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

1.五、 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.六、transition-delay

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

1.七、 来搞个例子吧

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

// 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支持该属性就能被触发。

2、 2d变换基础方法

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

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

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

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

2.一、 translate

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

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

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.三、 rotate

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

body:hover>.test{
			transform: rotate(360deg)
		}
复制代码

效果以下：

2.四、 skew

关于skew来讲而言，自己也有两个子方法：

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

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

效果以下：

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

3、原点位置

咱们这里有这样一个需求：就是在咱们的旋转操做中，咱们不但愿从，从元素的中心点开始旋转，这就触发了咱们接下来的一个属性：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%

4、 矩阵变换（matrix）

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

4.一、 矩阵变换的原理

首先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.一、用矩阵变换实现平移变换

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

这里值得咱们注意的点就是：让 a=1,b=0,c=0,d=1的状况下，e，f就至关于translate的两个参数。 通过计算 e=20,f=20。

4.二、用矩阵变换实现缩放变换

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

4.二、用矩阵变换实现旋转变换

问题：咱们想让元素旋转指定度数怎么作？ 咱们这里的计算公司至关于：

x' =x*cosθ - y*sinθ y' =  x*sinθ + y*cosθ
复制代码

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

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

4.二、用矩阵变换实现倾斜变换

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

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

4.三、总结

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

说在最后

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