div盒子的3D旋转

利用css的transform-style: preserve-3d和transform: rotateX()，并通过:hover的鼠标事件来监听实现盒子的3d旋转。

html代码：

<div>
    <div class="box1">
		<div class="box1-in"></div>    //第一个盒子
	</div>
	<div class="box2">
		<div class="box2-in"></div>    //第二个盒子
	</div>
</div>

css代码：

.box1,.box2 {
	width: 200px;
	height: 300px;
	float: left;
}
/* 第一个盒子 */
.box1 {
	border: 4px solid rgb(236, 177, 68);
	transform-style: preserve-3d;
	-webkit-perspective: 1000;
}
.box1-in {
	height: 100%;
	background-color: rgb(91, 245, 245);
	transition: 1.4s;
	transform-origin: bottom;
	transform: rotateX(99deg);
}
.box1:hover .box1-in {
	transform: rotateX(0deg);
}
/* 第二个盒子 */
.box2 {
	margin-left: 100px;
	border: 4px solid rgb(236, 177, 68);
	transform-style: preserve-3d;
	-webkit-perspective: 1000;