変換元の縦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

ここでは2つの考慮、水平位置と垂直位置があります。

水平ポジションを維持するには、transform-originの正しい値を計算する必要があります。

.frontと.back要素にパディングを追加すると、要素の幅が合計40px増加します。

CSS calc関数を使用して、オフセットをcalc(50% - 20px)と計算できます。これはうまくいくようです。

反転し.cardの垂直配置の問題を解決するには、ホバーで、あなたはその裏返し縦に他の要素に対して中心を維持するために、1.1で.cardのサイズをスケールアップ、あなたはオフセットtopを追加することができます移行へ。

たとえば、カードの高さが160pxの場合、カードの高さは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>