transform-origin设置变形中心点

HTML代码：

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

CSS代码：

.box {
	width: 100px;
	height: 100px;
	background-color: purple;
	margin-left: 150px;
	transition: all .5s;
	/*transform-origin: center; 默认盒子的正中心为旋转中心点*/
	/*transform-origin: left; 设置左边线中心点为旋转中心点*/
	/*transform-origin: left top; 设置左上角为旋转中心点*/
	transform-origin: 10px 30px; /* 设置距离左边线10px，上边线30px交叉点为旋转中心点*/
}
.box:hover {
	transform: rotate(180deg);
}

实现效果：