#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实现卡片翻转