老師 我只能翻轉(zhuǎn)出一面來 ，背面總是擋住我的正面，把它設(shè)為display:none；后翻轉(zhuǎn)過后什么都沒有，唉 弄一天了，麻煩老師在百忙中看下。謝謝老師
<style type="text/css">
*{padding:0;margin:0;}/*所有的元素都是*/
? ? ? ? body{
? ? ? ? ? ? ? background-color:#fff;/*背景色*/
? ? ? ? ? ? ? color:#555;/*字體顏色*/
? ? ? ? ? ? ? font-family:'Avenir Next','Lantinghei SC';
? ? ? ? ? ? ? font-size:14px;
? ? ? ? ? ? ? -webkit-font-smoothing:antialiased; ?/*字體平滑效果*/ ? ?
? ? ? ? ? ? }
? ? ? ? ? ? ?.wrap{
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:600px;?
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? top:50%;
? ? ? ? ? ? margin-top:-300px;
? ? ? ? ? ? background-color:#333;
? ? ? ? ? ? overflow: hidden;/*超出文本框的內(nèi)容不顯示*/
? ? ? ? ? ? -webkit-perspective:800px;/*子元素獲得3D旋轉(zhuǎn)效果*/
? ? ? ? ? ? }
? ? ? ? ? ? /*海報(bào)樣式*/
? ? ? ? ? ? .photo{
? ? ? ? ? ? width:260px;
? ? ? ? ? ? height:320;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? z-index: 1;
? ? ? ? ? ? box-shadow: 0 0 1px rgba(0,0,0,.01);/*陰影 rgba是顏色設(shè)置，最后一個(gè)參數(shù)是透明度*/?
? ? ? ? ? ? }
? ? ? ? ? ? /*背景面*/
? ? ? ? ? ? .photo .side{
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:100%;
? ? ? ? ? ? background-color: #eee;
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? top:0;
? ? ? ? ? ? right:0;
? ? ? ? ? ? padding:20px;
? ? ? ? ? ? box-sizing:border-box;/*width和height和padding三者結(jié)合的結(jié)果都會在box 的范圍內(nèi)*/
? ? ? ? ? ? }
? ? ? ? ?
? ? ? ? ? ?.photo .side-front{}
? ? ? ? ? ? .photo .side-front .image{
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:250px;
? ? ? ? ? ? line-height:250px;
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? }
? ? ? ? ? ? .photo .side-front .image img{
? ? ? ? ? ? width:100%;/*根據(jù)最外層的大小來自動(dòng)調(diào)整*/
? ? ? ? ? ? }
? ? ? ? ? ? .photo .side-front .caption{
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? line-height: 50px;
? ? ? ? ? ? }
? ? ? ? ? ?
? ? ? ? ? ? .photo .side-back .desc{
? ? ? ? ? ? color:#666;
? ? ? ? ? ? font-size:14px;
? ? ? ? ? ? line-height:1.5em;
? ? ? ? ? ? }
? ? ? ? ? ? /*當(dāng)前選中的海報(bào)樣式*/
? ? ? ? ? ? .photo_center{/*中間的圖片*/
? ? ? ? ? ? left:50%;/*水平垂直居中*/
? ? ? ? ? ? top:50%;
? ? ? ? ? ? margin:-160px 0 0 -130px;
? ? ? ? ? ? ? ?z-index: 999;/*一般為1 為防止中間的照片被其他的擋住，設(shè)置為999*/
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? .photo .side-back{}
? ? ? ? ? ? /*負(fù)責(zé)翻轉(zhuǎn)*/
? ? ? ? ? ? .photo-wrap{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? width:100%;
? ? ? ? ? ? height:100%;
? ? ? ? ? ? ? ? -webkit-transform-style:preserve-3d;
? ? ? ? ? ? ? ? /*讓photo-wrap所有子元素都繼承3D效果*/
? ? ? ? ? ? ? ? -webkit-transition:all .7s;
? ? ? ? ? ? ? ? /*翻轉(zhuǎn)20度*/
? ? ? ? ? ? } ? ?
? ? ? ? ? ? .photo-wrap .side-front{
? ? ? ? ? ? ? ? ? ? -webkit-transform: rotateY(0deg);
? ? ? ? ? ? ? ?}
? ? ? ? ? ? .phpto-wrap .side-back{
? ? ? ? ? ? ? ? ? -webkit-transform:rotateY(180deg);
? ? ? ? ? ? ? ?}
? ? ? ? ? ? .photo-wrap .side{
? ? ? ? ? ? ? ? -webkit-backface-visibility:hidden;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? .photo_front .photo-wrap{
? ? ? ? ? ? ? ? ? ? -webkit-transform: rotateY(0deg);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? /*影響photo-wrap的效果 控制photo-wrap去翻轉(zhuǎn)*/
? ? ? ? ? ? .photo_back .photo-wrap{
? ? ? ? ? ? ? ? ? ? -webkit-transform: rotateY(180deg);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? /*將海報(bào)抽象為具體，相當(dāng)于真實(shí)生活中的海報(bào)*/
? ? </style>
</head>
<body onselectstart="return false;">
<div class="wrap"><!--這里是背景墻-->
<!--photo photo_center負(fù)責(zé)平移 和旋轉(zhuǎn)-->
<!--繞著Y旋轉(zhuǎn)30° 平面上-->
<div class="photo photo_center photo_front" onclick="turn(this)"><!--照片墻-->
<!--photo-wrap負(fù)責(zé)3D旋轉(zhuǎn)-->
?<div class="photo-wrap">
<div class="side side-front"> <!--照片墻正面-->
<p class="image"><img src="圖片/1.jpg"/></p><!--正面的內(nèi)容-->
<p class="caption">康定</p><!--照片的描述-->
? ? ? ? </div>
? ? ? <div class="side side-back" style="display:none">
? ? ? ? <p class="desc" >描述信息</p>
? ? ? ? </div><!--照片的背面-->
? ? ? </div>
? ?</div>
</div>
2019-06-15
今明額嗯