CSS3内容3D翻转切换效果 <br /> * {<br /> padding:0px;<br /> margin:0px;<br /> }<br /> .box {<br /> position:relative;<br /> width:184px;<br /> height:270px;<br /> margin:30px auto;<br /> text-align:center;<br /> cursor:pointer;<br /> line-height:40px;<br /> font-size:16px;<br /> font-weight:bold;<br /> }<br /> .same{<br /> overflow:hidden;<br /> position:absolute;<br /> width:184px;<br /> height:270px;<br /> transition:all .3s linear 0s;<br /> -webkit-transition:all .3s linear 0s;<br /> -moz-transition:all .3s linear 0s;<br /> -ms-transition:all .3s linear 0s;<br /> transform-style:preserve-3d;<br /> -webkit-transform-style:preserve-3d;<br /> -moz-transform-style:preserve-3d;<br /> -ms-transform-style:preserve-3d;<br /> backface-visibility:hidden;<br /> -webkit-backface-visibility:hidden;<br /> -moz-backface-visibility:hidden;<br /> -ms-backface-visibility:hidden; <br /> }<br /> .front {<br /> transform:rotateY(0deg);<br /> -webkit-transform:rotateY(0deg);<br /> -moz-transform:rotateY(0deg);<br /> -ms-transform:rotateY(0deg);<br /> }<br /> .back {<br /> color:#F00;<br /> transform:rotateY(-180deg) ;<br /> -webkit-transform:rotateY(-180deg);<br /> -moz-transform:rotateY(-180deg);<br /> -ms-transform:rotateY(-180deg); <br /> }<br /> .box:hover .front {<br /> transform:rotateY(180deg);<br /> -webkit-transform:rotateY(180deg);<br /> -moz-transform:rotateY(180deg);<br /> -ms-transform:rotateY(180deg);<br /> }<br /> .box:hover .back {<br /> transform:rotateY(0deg);<br /> -webkit-transform:rotateY(0deg);<br /> -moz-transform:rotateY(0deg);<br /> -ms-transform:rotateY(0deg);<br /> }<br /> 翻转后内容 翻转前内容 源文件下载地址：{PE.SiteConfig.ApplicationPath/}{PE.SiteConfig.uploaddir/}/Article/20149/201409191558085849.rar
翻转后内容
翻转前内容
