變換原點垂直方向50％

Question

我正在製作一些在懸停時翻轉的卡，但無法使變換原點垂直工作。他們應該有50％的出身地位，這樣他們就可以向上或向下，但他們總是往下推。

http://codepen.io/rachelreveley/pen/oxVOeL

<div class="column"> 
    <div class="card-container card-1"> 
     <div class="card"> 
      <div class="front"> 
       <h3>Front</h3> 
       <p>Front</p> 
      </div> 
      <div class="back"> 
       <h3>Back</h3> 
       <p>Back</p> 
       <p><a class="button">Resell with intY</a></p> 
      </div> 
     </div> 
    </div> 
    <div class="card-container card-2"> 
     <div class="card"> 
      <div class="front"> 
       <h3>Front</h3> 
       <p>Front</p> 
      </div> 
      <div class="back"> 
       <h3>Back</h3> 
       <p>Back</p> 
       <p><a class="button">Resell with intY</a></p> 
      </div> 
     </div> 
    </div> 
    <div class="card-container card-3"> 
     <div class="card"> 
      <div class="front"> 
       <h3>Front</h3> 
       <p>Front</p> 
      </div> 
      <div class="back"> 
       <h3>Back</h3> 
       <p>Back</p> 
       <p><a class="button">Resell with intY</a></p> 
      </div> 
     </div> 
    </div> 
</div> 

body {padding: 30px;} 
.card-container {perspective: 1000; display: inline-block; margin: 0 3rem;} 
.card-container:hover .card, 
.card-container.hover .card { 
    transform: rotateY(180deg) scale(1.1); 
} 
.card-container, .front, .back { 
    width: 210px; 
    height: 297px; 
} 
.card { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
    transform-origin: 50%; 
} 
.front, .back { 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 20px; 
} 
.front { 
    background-color: #eee; 
    color: #122d40; 
    z-index: 2; 
    transform: rotateY(0deg); /* for firefox 31 */ 
} 
.back { 
    background-color: #1f7c8f; 
    transform: rotateY(180deg); 
} 

Answer 1

這裏有兩個方面的考慮，在水平位置與垂直位置。

要保持水平位置，您需要計算transform-origin的正確值。

您已將填充添加到.front和.back元素，這會將元素的寬度總計增加40px。

您可以使用CSS calc函數來計算偏移量爲calc(50% - 20px)，這似乎工作。

爲了與翻轉.card的垂直位置解決這個問題，懸停，你擴展的.card 1.1的大小，所以要保持翻轉相對於其他元素垂直居中，您可以添加top偏移到轉型。例如，如果您的卡的高度爲160像素，則卡將高16px，因此偏移設置爲top: -8x（因爲.card相對定位）。

body {padding: 30px;} 
 
.card-container {perspective: 1000; display: inline-block; margin: 0 2rem;} 
 
.card-container:hover .card, 
 
.card-container.hover .card { 
 
\t transform: rotateY(180deg) scale(1.1); 
 
    top: -8px; /* compute offset: 160*0.1/2 = 8 */ 
 
} 
 
.card-container, .front, .back { 
 
\t width: 100px; 
 
\t height: 160px; 
 
} 
 
.card { 
 
\t transition: 0.6s; 
 
\t transform-style: preserve-3d; 
 
\t position: relative; 
 
    top: 0; 
 
\t transform-origin: calc(50% + 20px); 
 
} 
 
.front, .back { 
 
\t backface-visibility: hidden; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t padding: 20px; 
 
} 
 
.front { 
 
\t background-color: #eee; 
 
\t color: #122d40; 
 
\t z-index: 2; 
 
\t transform: rotateY(0deg); \t /* for firefox 31 */ 
 
} 
 
.back { 
 
\t background-color: #1f7c8f; 
 
\t transform: rotateY(180deg); 
 
}

<div class="column"> 
 
    <div class="card-container card-1"> 
 
    <div class="card"> 
 
     <div class="front"> 
 
     <h3>Front</h3> 
 
     <p>Front</p> 
 
     </div> 
 
     <div class="back"> 
 
     <h3>Back</h3> 
 
     <p>Back</p> 
 
     <p><a class="button">Resell with intY</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card-container card-2"> 
 
    <div class="card"> 
 
     <div class="front"> 
 
     <h3>Front</h3> 
 
     <p>Front</p> 
 
     </div> 
 
     <div class="back"> 
 
     <h3>Back</h3> 
 
     <p>Back</p> 
 
     <p><a class="button">Resell with intY</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="card-container card-3"> 
 
    <div class="card"> 
 
     <div class="front"> 
 
     <h3>Front</h3> 
 
     <p>Front</p> 
 
     </div> 
 
     <div class="back"> 
 
     <h3>Back</h3> 
 
     <p>Back</p> 
 
     <p><a class="button">Resell with intY</a> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>