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

栏目: CSS · 发布时间: 5年前

内容简介:首先关于过渡,过渡是一个什么东西呢?我感觉用语言来描述是很苍白的,我们直接来看下面一段代码:代码的意思是在鼠标放在元素上面的时候,就会改变元素的高度,具体的效果如下:我们发现:在鼠标hover的时候,元素一瞬间高度变化,紧接着我们在其基础上面增加过渡的代码:

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

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

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

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

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

transition: height 2s;
复制代码

效果如下:

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

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>	
复制代码

效果如下:

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

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

二、 2d变换基础方法

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

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

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

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

2.1、 translate

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

translate

2.2、 scale

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

scale
<div class="test"></div>
		body:hover>.test{
			transform: scale(4,4);
		}
		.test{
			width: 100px;
			height: 100px;
			background-color: red;
			transition: transform 2s
		}
复制代码
从头开始复习css之2D变换

2.3、 rotate

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

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

效果如下:

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

2.4、 skew

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

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

效果如下:

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

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

三、原点位置

我们这里有这样一个需求:就是在我们的旋转操作中,我们不希望从,从元素的中心点开始旋转,这就触发了我们接下来的一个属性: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;
		}
复制代码

效果如下:

从头开始复习css之2D变换
从上面的效果图我们可以发现,该属性是用来更改一个元素变形的原点。 该元素在平面上可以接收两个值,代表变换的中心点(用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个参数组合成矩阵如下:

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

其中矩阵变换的原理是:

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

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 + y tanθx y’ = x tanθ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点半了,我先睡觉了


以上所述就是小编给大家介绍的《从头开始复习css之2D变换》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Hacker's Delight

Hacker's Delight

Henry S. Warren Jr. / Addison-Wesley / 2002-7-27 / USD 59.99

A collection useful programming advice the author has collected over the years; small algorithms that make the programmer's task easier. * At long last, proven short-cuts to mastering difficult aspec......一起来看看 《Hacker's Delight》 这本书的介绍吧!

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具