#my3dspace {
-webkit-perspective:800;
-webkit-perspective-origin:50% 50%;
overflow:hidden;
}
#pagegroup {
width:400px;
height:400px;
margin:100px auto 0 auto;
-webkit-transform-style:preserve-3d;
position:relative;
}
.page {
width:360px;
height:360px;
padding:20px;
background-color:black;
color:white;
font-weight:bold;
font-size:360px;
line-height:360px;
text-align:center;
position:absolute;
}
#page1 {
-webkit-transform-origin:bottom;
/*设置旋转元素的基点位置(以x轴)*/
-webkit-transition:-webkit-transform 1s linear;
}
#page2,#page3,#page4,#page5,#page6 {
-webkit-transform-origin:bottom;
-webkit-transition:-webkit-transform 1s linear;
-webkit-transform:rotateX(90deg);
//沿着x轴进行90°的翻转(平躺)
}
#op {
text-align:center;
}
#op a {
display:inline-block;
margin:20px;
text-decoration:none;
color:#696969;
border:1px solid #CCC;
padding:10px 20px;
}
#op a:hover {
background-color:#ABCDEF;
color:#FFF;
}
用css3实现卡片翻转