호버에서 매끄러운 CSS 변형 (높이 : 자동)

Question

CSS 변환을 사용하여 카드를 호버로 넘기고 싶습니다.

내가 찾은 일을 다음

body { 
 
    background: #f2f2f2; 
 
    font-family: Arial, sans-serif; 
 
    color: #000; 
 
    padding: 20px; 
 
} 
 

 
h3 { 
 
    font-size: 16px; 
 
} 
 

 
/* entire container, keeps perspective */ 
 

 
.flip-container { 
 
    perspective: 1000; 
 
    transform-style: preserve-3d; 
 
    width: 50%; 
 
    padding-top: 20px; 
 
    background: green; 
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 

 
/* hide back of pane during swap */ 
 

 
.front, 
 
.back { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #ffffff; 
 
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    background: #343434; 
 
    color: #fff; 
 
} 
 

 

 
/* flip speed goes here */ 
 

 
.flipper { 
 
    transition: 0.4s; 
 
    transform-style: preserve-3d; 
 
    max-height: 999px; 
 
    position: relative; 
 
} 
 

 

 
/* front pane, placed above back */ 
 

 
.front { 
 
    z-index: 2; 
 
    transform: rotateY(0deg); 
 
} 
 

 

 
/* back, initially hidden pane */ 
 

 
.back { 
 
    transform: rotateY(-180deg); 
 
} 
 

 

 
/* flip the pane when hovered */ 
 

 
.flip-container:hover .back { 
 
    transform: rotateY(0deg); 
 
} 
 

 
.flip-container:hover .front { 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="flipper"> 
 
    <div class="front"> 
 
     <!-- front content --> 
 

 
     <h3>Until 4 Oct 2015</h3> 
 
     <h2>Tyrannosaurus - Meet the Family</h2> 
 
    </div> 
 
    </div> 
 
    <div class="back"> 
 
    <!-- back content --> 
 

 
    <h3>In short</h3> 
 
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p> 
 
    <a class="button" href="#">Find out more</a> 
 
    </div> 
 
    
 
</div>

그러나

카드를 통해 애니메이션 더듬을 유혹 할 때 - .card 컨테이너의 부모 요소가 아닌 내가 생각하는 이유가 있기 때문에 자식 div의 전체 높이에 적응.

카드의 높이를 : 자동으로 설정하는 것도 중요합니다. 내부의 텍스트 길이에 따라 같은 페이지에 높이가 다른 카드가 있기 때문입니다.

도움 주셔서 감사합니다.

https://codepen.io/anon/pen/ZvbjEQ

Answer 1

문제는 부모 요소의 높이가 0이 대신 단순히 위치 abosulte 하나 개의 요소 수로하고 다른 하나를 유지하면 front와 back 모두 사용하는 절대 위치에있다 상대적인.

body { 
 
    background: #f2f2f2; 
 
    font-family: Arial, sans-serif; 
 
    color: #000; 
 
    padding: 20px; 
 
} 
 

 
h3 { 
 
    font-size: 16px; 
 
} 
 

 
/* entire container, keeps perspective */ 
 

 
.flip-container { 
 
    perspective: 1000; 
 
    transform-style: preserve-3d; 
 
    width: 50%; 
 
    padding-top: 20px; 
 
    
 
} 
 

 
.flip-container, 
 
.front, 
 
.back { 
 
    backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 

 

 
/* hide back of pane during swap */ 
 

 
.front, 
 
.back { 
 
    transition: 0.6s; 
 
    transform-style: preserve-3d; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background: #ffffff; 
 
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1); 
 
    text-align: center; 
 
} 
 

 
.back { 
 
    background: #343434; 
 
    color: #fff; 
 
} 
 

 

 
/* flip speed goes here */ 
 

 
/* front pane, placed above back */ 
 

 
.front { 
 
    z-index: 2; 
 
    transform: rotateY(0deg); 
 
    position: relative; 
 
} 
 

 

 
/* back, initially hidden pane */ 
 

 
.back { 
 
    transform: rotateY(-180deg); 
 
} 
 

 

 
/* flip the pane when hovered */ 
 

 
.flip-container:hover .back { 
 
    transform: rotateY(0deg); 
 
} 
 

 
.flip-container:hover .front { 
 
    transform: rotateY(180deg); 
 
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
    <div class="front"> 
 
     <!-- front content --> 
 

 
     <h3>Until 4 Oct 2015</h3> 
 
     <h2>Tyrannosaurus - Meet the Family</h2> 
 
    </div> 
 
    <div class="back"> 
 
    <!-- back content --> 
 

 
    <h3>In short</h3> 
 
    <p>Tyrannosaurus - Meet the Family explores how these terrifying dinosaurs became the world's top predators with their massive skulls, powerful jaws, and bone-crunching teeth.</p> 
 
    <a class="button" href="#">Find out more</a> 
 
    </div> 
 
    
 
</div>