transformiere Ursprung 50% vertikal

Question

Ich mache einige Karten, die beim Schweben umdrehen, aber den Transformursprung vertikal nicht erreichen können. Sie sollten einen 50% igen Ursprung haben, so dass sie sowohl nach oben als auch nach unten gehen, aber immer nur nach unten drücken.

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

Es gibt zwei Überlegungen hier, die horizontale Position und die vertikale Position. Um die horizontale Position beizubehalten, müssen Sie den korrekten Wert für transform-origin berechnen.

Sie haben den Elementen .front und .back eine Auffüllung hinzugefügt, die die Breite des Elements um insgesamt 40px erhöht.

Sie können die CSS calc Funktion verwenden, um den Offset als calc(50% - 20px) zu berechnen, und das scheint zu funktionieren.

Um das Problem mit der vertikalen Anordnung des blätterte .card, auf schweben zu beheben, skalieren Sie die Größe .card um 1,1, also in Bezug auf die anderen Elemente der vertikal gespiegelt zentriert zu halten, können Sie die top hinzufügen könnte Offset zum Übergang.

Zum Beispiel, wenn Ihre Karte 160px in der Höhe ist, wird die Karte 16px höher sein, so Offset top: -8x (seit .card ist relativ positioniert).

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>