CSS3基础3D写法

CSS3实现效果

3D视图盒子

实现方法如下

*{margin: 0; padding: 0;}
.box{
	width: 300px;
	height: 300px;
	margin: 0 auto;
	padding-top: 100px;
	perspective: 200px;
	border: 1px solid #e3e3e3;
}
.box ul{
	list-style: none;
	width: 100px;
	height: 50px;
	border: 1px solid red;
	margin: 30px auto;
	transform-style: preserve-3d;
	transition: 3s;
	transform-origin:center center -50px; 
	
}

.box ul li{
	width: 100px;
	height: 50px;
	position: absolute;
	line-height: 50px;
	text-align: center;
	color: #000;
	font-size: 26px;
}

.box ul li:nth-child(1){
	background: red;
	left: 0;
	top: 0;
}
.box ul li:nth-child(2){
	
	background: blue;
	left: -25px;
	top: 0;
	transform-origin:left ;
	transform: rotateY(90deg);
}
.box ul li:nth-child(3){
	background: bisque;
	left: 25px;
	top: 0px;
	transform-origin:right ;
	transform: rotateY(-90deg);
	
}
.box ul li:nth-child(4){
	height: 100px;
	background: darkgreen;
	left: 0;
	top: -125px;
	transform-origin:bottom;
	transform: rotateX(90deg);
}
.box ul li:nth-child(5){
	height: 100px;
	background: skyblue;
	left: 0;
	top: 80px;
	transform-origin:top;
	transform: rotateX(-90deg);
}

.box ul li:nth-child(6){
	background: papayawhip;
	left: 0;
	top: 0;
	transform: translateZ(-100px) rotateY(180deg);
}

.box:hover ul{
	transform: rotateY(360deg);
}

<div class="box">
    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
</div>