수직으로 움직이지 않고 바닥 원점에서 카드 뒤집기

Question

나는 transform-origin : bottom을 사용하여 카드가 x 축에서 회전하는 것과 관련된 rolodex 유형의 것을 만들려고합니다.

일종의 동작이지만 애니메이션 중에는 카드가 수직으로 이동하므로 "고정 플립 다운"효과가 적용되지 않습니다. 또한 3 차원의 관점을 부족한 고정

을 유지하면서 내가 카드를 만들 수있는 방법

는 바닥에서 회전 할 수 있습니다. 카드가 회전 할 때 (z 축) 카드가 떨어지는 것처럼 보이게 만드는 방법에 대한 제안 사항은 무엇입니까?

HAML :

.top 
    .rolo-w 
    #f1_card 
     .front.face 
     %h1 Lorem Ipsum 
     .back.face.center 
.bottom 

CSS :

.top{ 
    position:relative; 
    height: 50vh; 
} 
.rolo-w{ 
    width:400px; 
    height: 200px; 
    position:absolute; 
    bottom:0; 
    left:50%; 
    margin-left: -200px; 
    perspective: 1000; 
} 

#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 2s linear; 
} 
.top:hover #f1_card { 
    transform: rotateX(180deg); 
    box-shadow: -5px 5px 5px #aaa; 
    transform-style: preserve-3d; 
    transform-origin:bottom; 


} 
.face { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 

} 
.face.front{ 
    background: url("http://placehold.it/400x200"); 
} 
.face.back { 
    background-color:green; 
    display: block; 
    transform: rotateX(180deg); 
    box-sizing: border-box; 
    padding: 10px; 
    color: white; 
    text-align: center; 
} 
h1{ margin:0; text-align: center} 

Pen here

감사합니다!

Answer 1

문제는 변형 된 원점이 맴돌던 상태에서만 설정되는 것으로부터옵니다. 그러면 전환은 을 변형 원점으로 변경하며 원하는 것은 아닙니다. 기본 스타일로 변환 - 원점을 이동 :

또한

#f1_card { 
    width: 100%; 
    height: 100%; 
    transform-style: preserve-3d; 
    transition: all 2s linear; 
    transform-origin: bottom; 
} 
.top:hover #f1_card { 
    transform: rotateX(-180deg); 
    box-shadow: -5px 5px 5px #aaa; 
} 

, 관점 단위

perspective: 1000px; 

그리고 당신은 당신이

결과쪽으로 넘어하려면 최종 각도가 음수가 될 수 있어야합니다 있어야합니다 :

codepen