transfrom：移动、缩放、旋转、斜切

CSS3中的transfrom属性，能够对元素进行移动、缩放、旋转、斜切等操作。
translate移动：translate(tx) | translate(tx, ty)
translateX(tx), translateY(ty)
如果只有个参数，就代表x方向；如果有2个参数，就代表x和y方向。

scale缩放：让元素根据中心原点对对象进行缩放。默认值1
如果值在0.01-0.99之间的任意值，元素缩小；而大于1的时候，让元素显得更大。
缩放都是参照元素中心点。
1. 当传入两个参数，分别按照不同的参数进行缩放。
2. 传入一个参数，代表x和y方向，进行等比例的缩放。

rotate旋转：rotate(a)
a 代表一个旋转的角度值。可以使正数，也可以是负数。
如果取值为正数，元素默认相对元素中心点顺时针旋转；150deg
如果是负数，元素默认之下相对元素中心点逆时针旋转。-150deg

skew斜切：skew(ax)| skew(ax, ay)
ax:指定元素水平方向（x轴方向）倾斜的角度。
ay:指定元素垂直方向（Y轴方向）倾斜的角度，默认值0
如果角度为正，则往当前轴负方向斜切；为正数，往轴的而正方向斜切。
他可以将一个对象以其中心位置围绕x轴和y轴按照一定的角度倾斜。
这与rotate函数的旋转不同，rotate函数只是旋转，不会改变元素的形状。
skew函数不会旋转，而只会改变元素的形状。

<html>
	<head>
		<meta charset="utf-8">
		<title>实现2D转换 transform:translate, scale, rotate, skew</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			div {
				width: 100px;
				height: 100px;
				background-color: red;
				margin-left: 200px;
				transition: transform 2s;
				margin-top: 10px;
			}

			/* 移动 */
			div:first-of-type:active {
				/* 使用transform实现元素移动。
				a 移动是参照元素的左上角 
				b 执行完毕之后恢复到原始状态 */
				/* transform:translate(500px); */
				/* transform:translate(500px, 600px); */
				transform: translateY(500px);
			}
			/* 缩放 */
			div:nth-of-type(2):active {
				/* transform: scale(0.2, 1); */
				transform:scaleX(0.5);
			}
			/* 旋转 */
			div:nth-of-type(3):active {
				transform:rotate(150deg);
				/* transform:rotate(-150deg); */
			}
			/* 歪斜，让元素倾斜显示， */
			div:nth-of-type(4):active {
				/* transform:skew(45deg);*/
				/* transform.: skew(30deg, -30deg); */
				transform:skewX(60deg);
			}
		</style>
	</head>
	<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>

transfrom：移动、缩放、旋转、斜切

猜你喜欢