css3 Matrix:可以同时缩放旋转平移的transform的属性值

css3 Matrix:可以同时缩放旋转平移元素的transform的属性值

我比较懒,为了方便同样跟我一样懒得人,直接上干货!

Matrix是什么?

Matrix是Css3中的一个的一个新属性transform属性值,transform用来元素的2D或3D变形;也就是你可以将元素旋转,缩放,移动,倾斜等。

什么时候需要用到Matrix?

transform有很多变形的属性,比如:translate-位移,rotate-旋转,scale-缩放
那么想同时设置位移,旋转,缩放,以及倾斜就要用到Matrix了。

如何设置Matrix的值?

**写法**:transform:matrix(0.866,0.5,-0.5,0.866,0,0);

一共6个参数,包含旋转,缩放,移动(平移)和倾斜功能。这6各参数,我暂且先取名abcdef也就是matrix(a,b,c,d,e,f)。

  1. e是x轴的平移。
  2. f是y轴的平移。
  3. a是x轴对的缩放,以倍数的方式控制。
  4. d是y轴对的缩放,以倍数的方式控制。
  5. a,b,c,d是共同控制旋转角度的,以cosθ,sinθ,-sinθ,cosθ的方式共同控制,bc处是sinθ-sinθ就是顺时针旋转

    其实就是:matrix(倍数·cosθ,sinθ,-sinθ,倍数·cosθ,0,0);

可以看到上面的这个例子:transform:matrix(0.866,0.5,-0.5,0.866,0,0);前四个参数都是小数,因为cosθ和sinθ的值都是在-+1之间,所以前四个参数通过倍数和cosθsinθ的值共同作用控制缩放旋转,

实例

先看下没有用matrix的情况

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.square{
   //一个宽x高300300的正方形,中间有文字
				posi

你可能感兴趣的:(前端css,css3,matrix,transform)