.container{
	margin:10px auto;
	width:530px;
	height:530px;
	transform-style:preserve-3d;
}
.item{
	width:500px;
	transform-style:preserve-3d;
	position:relative;
	transition:transform 1s;
}
/* 鼠标滑过container 的话滑动时不会有卡顿 */
.container:hover .item{
	transform:rotateY(180deg);
}
.container:hover .description{
	opacity:1;
}
.description{
	position:absolute;
	top:0;
	width:500px;
	height:500px;
	opacity:0;
	background-color:rgba(255,255,255,.5);
	color:#fff;
	transition:opacity 1s .5s;
	text-align:center;
	line-height:500px;
	transform:rotateY(180deg)
}
/* 翻书效果 */
.container2{position:relative;margin:20px auto;perspective:1500px;transform-style:preserve-3d;height:600px;}
.book,.book1,.book2,.book3,.book4{margin:10px auto;width:500px;height:500px;top:0;left:680px;position:absolute;
transform:rotateX(30deg);transform-style:preserve-3d;transform-origin:20%;}
.rotate3d{width:500px;height:500px;margin:10px auto;position:absolute;transform-origin:0%;}
/* 文字说明 */
.name{background-color:rgba(255,255,255,.8);line-height:500px;text-align:center;font-size:20px;width:500px;}
/* 封面 */
.cover{background-color:pink;line-height:500px;text-align:center;font-size:30px;}
/* 3D旋转 y轴 */
.container2:hover .book .rotate3d{animation:10s rotate1 infinite;}
.container2:hover .book1 .rotate3d{animation:10s rotate2 infinite;}
.container2:hover .book2 .rotate3d{animation:10s rotate3 infinite;}
.container2:hover .book3 .rotate3d{animation:10s rotate4 infinite;}
@keyframes rotate1{
	0%{transform:rotateY(0deg);}
	10%{transform:rotateY(0deg);}
	55%{transform:rotateY(-160deg);}
	93%{transform:rotateY(-160deg);}
	100%{transform:rotateY(0deg);}
}
@keyframes rotate2{
	0%{transform:rotateY(0deg);}
	30%{transform:rotateY(0deg);}
	60%{transform:rotateY(-150deg);}
	90%{transform:rotateY(-150deg);}
	95%{transform:rotateY(0deg);}
	100%{transform:rotateY(0deg);}
}
@keyframes rotate3{
	0%{transform:rotateY(0deg);}
	45%{transform:rotateY(0deg);}
	60%{transform:rotateY(-140deg);}
	82%{transform:rotateY(-140deg);}
	90%{transform:rotateY(0deg);}
	100%{transform:rotateY(0deg);}
}
@keyframes rotate4{
	0%{transform:rotateY(0deg);}
	55%{transform:rotateY(0deg);}
	70%{transform:rotateY(-130deg);}
	75%{transform:rotateY(-130deg);}
	85%{transform:rotateY(0deg);}
	100%{transform:rotateY(0deg);}
}
/* 规则图形CSS */
.container3{margin:20px auto;width:500px;}
.container3>div{margin-top:20px;text-align:center;line-height:200px;}
.oval{width:300px;height:200px;background-color:green;border-radius:150px/100px;}
.circle{width:200px;height:200px;background-color:yellow;border-radius:100px;}
.square{width:200px;height:200px;background-color:red;}
.cubic{width:300px;height:200px;background-color:blue;}
.cubic1{width:300px;height:200px;background-color:pink;transform:skew(-30deg);}
.cubic2{width:200px;height:0;border-bottom:200px solid brown;border-left:100px solid transparent;border-right:100px solid transparent;}
.triangle{width:0;height:0;border-top:200px solid orange;border-left:100px solid transparent;
border-right:100px solid transparent;margin-bottom:100px;}

.five{
	position:relative;width:0;height:0;
	border-bottom: 100px solid purple;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    transform: rotate(35deg);
	margin-bottom:100px;
}
/* 伪类元素 前后补 样式 */
.five:before{
	content:"";
	position:absolute;
	width:0;height:0;
	border-bottom: 110px solid purple;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;
    top: -69px;
    left: -99px;
    transform: rotate(-35deg);
}
.five:after{
	content:"";
	position:absolute;
	width:0;height:0;
	border-bottom: 100px solid purple;
    border-left: 140px solid transparent;
    border-right: 140px solid transparent;
    transform: rotate(-70deg);
    top: 9px;
    left: -153px;
}
.egg{
	margin-bottom:100px;
	width:200px;height:300px;
	background-color:orange;
	border-bottom-left-radius:150px;
	border-bottom-right-radius:150px;
	border-top-left-radius: 165px 350px;
    border-top-right-radius: 165px 350px;
}
.heart{
	position:relative;
	width:170px;height:100px;
	background-color:red;
	border-radius:50px 0 0 50px;
	transform:rotate(45deg);
	margin-bottom:100px;
}
.heart:before{
	content:"";
	position:absolute;
	width:170px;height:100px;
	background-color:red;
	border-radius:50px 0 0 50px;
	transform:rotate(90deg);
	top: -35px;
    left: 35px;
}
.talk{
	position:relative;
	width:200px;height:100px;
	border-radius:10px;
	background-color:blue;
	border:5px solid red;
}
.talk2{
	position:absolute;width:22px;height:22px;
	border-left:5px solid red;
	border-bottom:5px solid red;
	transform:rotate(45deg);
	top: 3620px;
    left: 135px;
}
.talk:before{
	content:"";
	position:absolute;
	width:0;height:0;
	border-right:20px solid blue;
	border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
	top:34px;left:-20px;
}
.talk:after{
	content:"你好！";
	position:absolute;
	top:-50px;left:30px;
	color:#fff;
	font-size:30px;
}