如果想让一个元素改变自身形状, 大小与位置, 可以使用 transform

transform 具体属性值

translate 根据 X, Y 轴给定的参数,从当前元素位置移动

.box{
	/* 从当前元素位置像右移动 100px, 向下移动 150px */
	transform: translate(100px, 150px);
}

rotate 给一个度数,顺时针旋转元素。值允许为负数, 为负数时元素逆时针旋转

.box{
	/* 顺时针旋转 45度 */
	transform: rotate(45deg);
}

scale 设置元素放大缩小 以元素 X,Y 轴放大缩小

.box{
	transform: scale(1,2);  /* x 轴放大一倍, y 轴放大 2 倍 */
}

.box{
	transform: scale(2);  /* x y 轴放大 2 倍 */
}

skew 元素会根据 X,Y 轴以给定的度数来倾斜

此属性可用用来设置动画延迟执行
.box{
	transform: skew(30deg,30deg);
}
	
<style type="text/css">
	.box{
		height: 400px;
		overflow: hidden;
		padding: 10px;
		border :  1px solid #d1d1d1;
	}

	#main{
		width: 200px;
		height: 200px;
		border :  1px solid #d1d1d1;
		background: url(/static/images/svon.png) no-repeat center center;
		background-size: 90% 90%;
		visibility: visible;
		-webkit-transition: 0.3s;
		-moz-transition: 0.3s;
		transition: 0.3s;
	}
	#main.translate{
		transform: translate(100px, 150px);
	}
	#main.rotate{
		transform: rotate(45deg);
	}
	#main.scale{
		transform: scale(1,2);
	}
	#main.skew{
		transform: skew(30deg,30deg);
	}
</style>

	
<div class="box">
	<div id="main"></div>
</div>