CSS 卡片效果在 Mobile Safari 上不起作用答案

【问题标题】：CSS Card Effect not working on Mobile SafariCSS 卡片效果在 Mobile Safari 上不起作用
【发布时间】：2018-02-05 21:02:50
【问题描述】：

关于效果的“翻转”方面，我构建了一个似乎可以在 Safari Mobile 上运行的卡片翻转效果。但是，卡片在翻转时未显示正确的图像。我将效果用作“之前和之后”，在卡片的每一面使用单独的图像。我会发布我的代码。谢谢。

.beforeafter {
    margin: 10px auto;
    text-align: center;
}

.card-container {
    cursor: pointer;
    height: 300px;
    perspective: 600;
    position: relative;
    width: 300px;
    display: inline-block;
}

.clientcard {
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: all .5s ease-in-out;
    width: 100%;
}

.clientcard:hover {
    transform: rotateY(180deg);
    -webkit-transform: -webkit-translateY(180deg);
}

.clientcard .side {
    backface-visibility: hidden;
    border-radius: 2px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

.clientcard .back {
    background: #eaeaed;
    color: #0087cc;
    line-height: 150px;
    text-align: center;
    transform: rotateY(180deg);
}

    <div class="beforeafter">
    <div class="card-container">
  <div class="clientcard">
    <div class="side"><img src="img/sean1.JPG"></div>
    <div class="side back"><img src="img/sean1copy.JPG"></div>
  </div>
</div>
    
       <div class="card-container">
<div class="clientcard">
    <div class="side"><img src="img/sean2.JPG"></div>
    <div class="side back"><img src="img/sean2copy.JPG"></div>
  </div>
</div> 
     
        <div class="card-container">
  <div class="clientcard">
    <div class="side"><img src="img/sean3copy.jpg"></div>
    <div class="side back"><img src="img/sean3.jpg"></div>
  </div>
</div>
        
        <div class="card-container">
  <div class="clientcard">
    <div class="side"><img src="img/gwork.jpg"></div>
    <div class="side back"><img src="img/alana2.jpeg"></div>
  </div>
</div>  
    </div>

【问题讨论】：

标签： html css mobile mobile-safari

【解决方案1】：

我相信你想在负-180 度的 Y 轴上旋转。我稍微改进了你的代码，不介意它是从 sass 翻译而来的糟糕格式，如果你想要另一张带有翻转副本的卡片并超过该代码

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  position: relative;
  height: 52rem; }
  
.card_side {
  height: 52rem;
  transition: all 2s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
 }
.card_side-front {
  background-color: blue; 
}
    
    .card_side-back {
      transform: rotateY(180deg); 
    }
      
      .card_side-back-1 {
        background-image: linear-gradient(to right bottom, #ffb900, #ff7730); 
        
     }
        
  .card:hover .card_side-front {
    transform: rotateY(-180deg); 
   }
   
  .card:hover .card_side-back {
    transform: rotateY(0); 
   }
    

   .card_picture-1 {
      background-color: blue; 
    }

<div class="row">
  <div class="col-1-of-3">
      <div class="card">
          <div class="card_side card_side-front">
              <h4 class="card_heading">
                  <span class="card_heading-span card_heading-span-1">card front text</span>
              </h4>
          </div>
          <div class="card_side card_side-back card_side card_side-back-1">
              <div class="card_cta">
                  <div class="card_price-box">
                      <p class="card_price-only">back text</p>
                  </div>
              </div>
          </div>
      </div>
  </div>

【讨论】：