css transform 转换

css的 transform 属性应用于元素的2D或3D转换。

使用这个属性可将元素进行旋转,缩放,移动,倾斜等操作。

例子:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>transform 转换</title>
  <style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		width: 200px;
		height: 100px;
		margin: 100px 100px;
		background: pink;	
		text-align: center;
	}
	
	.content:hover{
		width: 300px;
	}
  </style>
 </head>
 <body>
	<div class="content">transform 转换</div>
 </body>
</html>

效果如下:
css transform 转换

rotate

rotate():定义了元素的2D旋转转换;“deg”是“度”的意思,如“10deg”表示“10度”。

例如下面的例子,鼠标移上去之后:

		transform: rotate(10deg);
		-webkit-transform: rotate(10deg); /* Safari */
		-moz-transform: rotate(10deg);

页面效果:
css transform 转换

skew

skew():定义了元素沿着X轴和Y轴的2D倾斜转换;

	.content:hover{
		width: 300px;
		transform: skew(10deg);
		-webkit-transform: skew(10deg); /* Safari */
		-moz-transform: skew(10deg);
	}

页面效果:
css transform 转换

scale

scale(x,y):定义了元素的 2D 缩放转换比例。
可以传2个值,括号里如果只写了一个值时,则表示xy都一样。“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负值。

	.content:hover{
		width: 300px;
		transform: scale(2.0);
		-webkit-transform: scale(2.0); /* Safari */
		-moz-transform: scale(2.0);
	}

页面效果:
css transform 转换

translate

translate(x,y):定义了元素的2D位移变动;
向右或者向下移则值为正,向左向上位移则为负值。
下面的例子,元素向右和向上移动了:

	.content:hover{
		width: 300px;
		transform: translate(50px,-50px);
		-webkit-transform: translate(50px,-50px); /* Safari */
		-moz-transform: translate(50px,-50px);
	}

页面效果:
css transform 转换

matrix

matrix(n,n,n,n,n,n) 定义 了元素的 2D 转换,使用六个值的矩阵。

	.content:hover{
		width: 300px;
		transform: matrix(2,2,0,2,45,0);
		-webkit-transform: matrix(2,2,0,2,45,0); /* Safari */
		-moz-transform: transformmatrix(2,2,0,2,45,0);
	}

页面效果:
css transform 转换

上一篇:XNA游戏开发之2D游戏


下一篇:理论解析:如何让A*寻路算法适应2D网格平台游戏