* {
	margin:0;
	padding:0
}
li {
	list-style:none;
}
#solid {
	width:800px;
	height:360px;
	margin:150px auto 0;
	box-shadow:1px 7px 25px #fd8fd9;
	perspective:800px;
}
#solid ul {
	height:100%;
}
#solid ul li {
	/*width:200px;
	*/
            /*height:360px;
	*/
            position:relative;
	float:left;
	box-sizing:border-box;
	transform-style:preserve-3d;
	/*
                1. 给父级 transform-origin:center center -180px;
	2. 把每一个li抽出来
             */
            -transform-origin:center center -180px;
	transform:translateZ(-180px);
}
#solid ul li div {
	position:absolute;
	width:100%;
	height:100%;
	/*opacity:0.5;
	*/
}
#solid ul li div:nth-child(1) {
	top:-360px;
	background:url("http://www.jq22.com/img/cs/500x300-1.png");
	transform-origin:bottom;
	transform:translateZ(180px) rotateX(90deg);
}
#solid ul li div:nth-child(2) {
	top:360px;
	background:url("http://www.jq22.com/img/cs/500x300-2.png");
	transform-origin:top;
	transform:translateZ(180px) rotateX(-90deg);
}
#solid ul li div:nth-child(3) {
	background:url("http://www.jq22.com/img/cs/500x300-3.png");
	transform:translateZ(180px);
}
#solid ul li div:nth-child(4) {
	background:url("http://www.jq22.com/img/cs/500x300-4.png");
	transform:translateZ(-180px) rotateX(180deg);
}
#solid ul li div:nth-child(5) {
	width:360px;
	left:-360px;
	background:green;
	transform-origin:right;
	transform:translateZ(180px) rotateY(-90deg);
}
#solid ul li div:nth-child(6) {
	width:360px;
	left:200px;
	background:orange;
	transform-origin:left;
	transform:translateZ(180px) rotateY(90deg);
}
#solid ul li:nth-child(1) div {
	background-position-x:0;
}
#solid ul li:nth-child(2) div {
	background-position-x:-200px;
}
#solid ul li:nth-child(3) div {
	background-position-x:-400px;
}
#solid ul li:nth-child(4) div {
	background-position-x:-600px;
}
/*#solid ul li:nth-child(1) {
	transition:1s 0s ease-in-out;
}
#solid ul li:nth-child(2) {
	transition:1s 0.4s ease-in-out;
}
#solid ul li:nth-child(3) {
	transition:1s 0.8s ease-in-out;
}
#solid ul li:nth-child(4) {
	transition:1s 1.2s ease-in-out;
}
*/
        /*        #solid ul:hover li {
	transform:translateZ(-180px) rotateX(90deg);
}
*/

        #solid ol {
	position:absolute;
	left:50%;
	bottom:15px;
	width:140px;
	height:20px;
	transform:translateX(-50%);
	display:flex;
	justify-content:space-around;
}
#solid ol li {
	width:20px;
	height:20px;
	background:black;
	box-shadow:0 2px 5px white;
	border-radius:50%;
	color:white;
	text-align:center;
	/*斜体 12px大小/20px行高*/
            font:italic 12px/20px 'Microsoft Yahei';
	cursor:pointer;
}
#solid ol li.on {
	background:red;
}