形变

.box {
    transform: rotateX(360deg) | rotateY(360deg) | rotateZ(360deg);
}

.box {
    transform: translateX(200px) | translateY(200px);
}

.box {
    transform: scaleX(2) scaleY(0.5)
}

记:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>形变</title>
	<style type="text/css">
		div {
			 150px;
			height: 150px;
			background-color: red;
			margin: 10px auto;
			transition: 3s;
		}
		/*旋转形变:旋转的是角度 deg*/
		.d1:hover {
			/*transform: rotateX(3600deg);*/
			/*transform: rotateY(3600deg);*/
			/*transform: rotateZ(3600deg);*/
			transform: rotateX(3600deg) rotateY(3600deg) rotateZ(3600deg);
		}
		/*偏移形变:偏移的是距离 px*/
		.d2:hover {
			/*transform: translateX(200px);*/
			/*transform: translateY(200px);*/
			transform: translateX(200px) translateY(200px);
		}
		/*缩放形变:缩放的是比例*/
		.d3:hover {
			transform: scale(2, 0.5);
		}
		.d4:hover {
			/*transform: translateX(200px) rotateZ(3600deg);*/
			transform: rotateZ(3600deg) translateX(200px);
		}
	</style>
</head>
<body>
	<div class="d1"></div>
	<div class="d2"></div>
	<div class="d3"></div>
	<div class="d4"></div>
</body>
</html>