为什么我的显示图片背面的时候还是原图片，而且旋转的时候图片边框没有跟着旋转？下付代码，求大神指导

<!DOCTYPE html>
<html>
   <head>
       <meta charset = "utf-8">
       <h1 align = "center" ><i>画廊</i></h1>
       <style type="text/css">
                     *{padding: 0;margin: 0;}
         body
       {
          background-color: #f00;/*背景景色*/
          color: yellow;/*通用字体颜色*/
          font-family: 'Avenir Next','Lantinghei SC';/*字体样式*/
          font-size: 16px;/*字体大小*/
          -webkit-font-smoothing:antialiasezd;/*字体平滑*/

       }
       .wrap
          {
              width: 100%;
              height: 600px;
              position: absolute;/*垂直居中*/
              top:50%;
              margin-top:-200px;/*设为高度的一半*/
              overflow: hidden;/*超出warp范围的样式不显示*/
              -webkit-perspective:800px;
              -webkit-perspective-origin:50% 50%;
              -webkit-transform-style:-webkit-preserve-3d;
          }
          /*海报样式*/
       .photo
          {
              width: 300px;
              height: 422px;
              position: absolute;
              z-index: 1;
              box-shadow: 0 0 1px rgba(0,0,0,.01);/*阴影*/
              border:3px solid yellow;
              text-align: center;
          }
          .photo.side
          {
              width: 100%;
              height: 100%;
              background-color: #eee;
              position: absolute;
              top: 0;
              right: 0;
              box-sizing : border-box;/*padding和内容都在边框之内*/
              -webkit-perspective:800px;
              -webkit-perspective-origin:50% 50%;
              -webkit-transform-style:-webkit-preserve-3d;
          }

          .photo-wrap.side-front
          {
              -webkit-transform:rotateY(0deg);
          }
          .photo-wrap.side-back
          {
              -webkit-transform:rotateY(180deg);
          }
          .photo-wrap.side
          {
              -webkit-backface-visibility:visible;
          }
          .photo-front .photo-wrap{
              -webkit-transform:rotateY(0deg);
          }
          .photo-back .photo-wrap{
              -webkit-transform:rotateY(180deg);
          }
          .photo.side-front{}
          .photo.side-front.image
          {
              width: 100%;
              height: 250px;
              line-height: 250px;
              overflow: hidden;
              -webkit-perspective:800px;
              -webkit-perspective-origin:50% 50%;
              -webkit-transform-style:-webkit-preserve-3d;
          }
          .photo .side-front .image img
          {
              width: 100%;
          }
          .photo .side-front .caption
          {
              text-align: center;
              font-size: 14px;
              line-height: 10px;
              top: 10%;

          }
          .photo.side-back{}
          .photo.side-back.desc{
              top:100px;
              color: #f44;
              font-size:14px;
              line-height: 1.5em;
          }
          /*当前选中的海报样式*/
          .photo-center
          {
              left: 50%;
              top: 40%;
              margin:-150px 0 0 -148px;
              z-index: 999;
          }
          .photo-wrap
          {
              position: absolute;
              width: 100%;
              height: 100%;
               -webkit-perspective:800px;
              -webkit-perspective-origin:50% 50%;
              -webkit-transform-style:-webkit-preserve-3d;
               -webkit-transition:all 3s;
          }

       </style>
   </head>
   <body onselectstart = "return false;">
       <div classs = "wrap">
           <div class = "photo photo-center">
               <div class = "photo-wrap">
                   <div class = "side side-front">
                       <p class ="image">
                       <img src= "srcs/lang.jpg"></p>
                       <p calss = "caption">可爱的狼</p>
                   </div>
                   <div class = "side side-back">
                       <p class ="desc">描述信息</p>
                   </div>
               </div>
           </div>
       </div>
   </body>
</html>

慕粉3451677

浏览 1788回答 1

1回答

Its_forever

应该是浏览器相关，你用谷歌浏览器就没有问题。

0 0

随时随地看视频慕课网APP