亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

老師 我只能翻轉出一面來 ,背面總是擋住我的正面,把它設為display:none;后翻轉過后什么都沒有,唉 弄一天了,麻煩老師在百忙中看下。謝謝老師

<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;/*超出文本框的內容不顯示*/

? ? ? ? ? ? -webkit-perspective:800px;/*子元素獲得3D旋轉效果*/

? ? ? ? ? ? }

? ? ? ? ? ? /*海報樣式*/

? ? ? ? ? ? .photo{

? ? ? ? ? ? width:260px;

? ? ? ? ? ? height:320;

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? z-index: 1;

? ? ? ? ? ? box-shadow: 0 0 1px rgba(0,0,0,.01);/*陰影 rgba是顏色設置,最后一個參數是透明度*/?

? ? ? ? ? ? }


? ? ? ? ? ? /*背景面*/

? ? ? ? ? ? .photo .side{

? ? ? ? ? ? width:100%;

? ? ? ? ? ? height:100%;

? ? ? ? ? ? background-color: #eee;

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? top:0;

? ? ? ? ? ? right:0;

? ? ? ? ? ? padding:20px;

? ? ? ? ? ? box-sizing:border-box;/*width和height和padding三者結合的結果都會在box 的范圍內*/

? ? ? ? ? ? }

? ? ? ? ?

? ? ? ? ? ?.photo .side-front{}

? ? ? ? ? ? .photo .side-front .image{

? ? ? ? ? ? width:100%;

? ? ? ? ? ? height:250px;

? ? ? ? ? ? line-height:250px;

? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? }

? ? ? ? ? ? .photo .side-front .image img{

? ? ? ? ? ? width:100%;/*根據最外層的大小來自動調整*/

? ? ? ? ? ? }

? ? ? ? ? ? .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;

? ? ? ? ? ? }

? ? ? ? ? ? /*當前選中的海報樣式*/

? ? ? ? ? ? .photo_center{/*中間的圖片*/

? ? ? ? ? ? left:50%;/*水平垂直居中*/

? ? ? ? ? ? top:50%;

? ? ? ? ? ? margin:-160px 0 0 -130px;

? ? ? ? ? ? ? ?z-index: 999;/*一般為1 為防止中間的照片被其他的擋住,設置為999*/


? ? ? ? ? ? }


? ? ? ? ? ??

? ? ? ? ? ? .photo .side-back{}

? ? ? ? ? ? /*負責翻轉*/


? ? ? ? ? ? .photo-wrap{

? ? ? ? ? ? position:absolute;

? ? ? ? ? ? width:100%;

? ? ? ? ? ? height:100%;

? ? ? ? ? ? ? ? -webkit-transform-style:preserve-3d;

? ? ? ? ? ? ? ? /*讓photo-wrap所有子元素都繼承3D效果*/

? ? ? ? ? ? ? ? -webkit-transition:all .7s;

? ? ? ? ? ? ? ? /*翻轉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去翻轉*/

? ? ? ? ? ? .photo_back .photo-wrap{

? ? ? ? ? ? ? ? ? ? -webkit-transform: rotateY(180deg);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? /*將海報抽象為具體,相當于真實生活中的海報*/



? ? </style>

</head>


<body onselectstart="return false;">


<div class="wrap"><!--這里是背景墻-->

<!--photo photo_center負責平移 和旋轉-->

<!--繞著Y旋轉30° 平面上-->

<div class="photo photo_center photo_front" onclick="turn(this)"><!--照片墻-->

<!--photo-wrap負責3D旋轉-->

?<div class="photo-wrap">

<div class="side side-front"> <!--照片墻正面-->

<p class="image"><img src="圖片/1.jpg"/></p><!--正面的內容-->

<p class="caption">康定</p><!--照片的描述-->

? ? ? ? </div>

? ? ? <div class="side side-back" style="display:none">

? ? ? ? <p class="desc" >描述信息</p>

? ? ? ? </div><!--照片的背面-->

? ? ? </div>

? ?</div>

</div>


正在回答

1 回答

今明額嗯

0 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

老師 我只能翻轉出一面來 ,背面總是擋住我的正面,把它設為display:none;后翻轉過后什么都沒有,唉 弄一天了,麻煩老師在百忙中看下。謝謝老師

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號