CSS元素旋转3D显示

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);
}
上一篇:CSS学习笔记(一)-21.清除浮动


下一篇:BFC理解