Html
    Css
    Js

    
                        
#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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.1.4
 立即下载

css3卡片翻转

用css3实现卡片翻转

0