CSS元素旋转3D显示

html代码

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

css代码

.box {
	position: relative;
	width: 200px;
	height: 200px;
	border: 1px solid red;
	/* 3D变形 */
	transform-style: preserve-3d;
	-webkit-perspective: 1000px;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	perspective: 1000px;
}

.box .main {
	background: skyblue;
	height: 100%;
	transition: 1s;
	transform: rotateY(45deg);
}

标签：transform,200px,height,perspective,旋转,1000px,CSS,3D
来源： https://blog.csdn.net/sunddy_x/article/details/118570484