CSS 변환으로 뒤집는 카드. 애니메이션에 속성이 필요합니까?

Question

Demo

뒤집기 애니메이션의 핵심 transform: rotateY(180deg);에있다. 애니메이션의 경우 물론 transition도 필요합니다. transition: all ...;을 사용하는 다른 사이트의 코드를 복사했습니다.

일부 이유 (예 : 높이, 너비)에는 전환이 없어야합니다. 그러나 애니메이션을 뒤집기 위해 어떤 속성이 필수적인지는 알 수 없습니다.

아무 관계없는 속성에 영향을 미치지 않으면 서 내리는 애니메이션을 유지하기 위해 누구나 어떻게 회선을 변경할 수 있는지 알고 있습니까?

Answer 1

이 페이지는 모든 것을 설명하고 라이브 데모를 제공합니다. 나는 지금 막 간단한 Google 수색을 필요로했다. :)

는

http://desandro.github.io/3dtransforms/docs/card-flip.html

분명히, 트릭

전환 사용하는 것입니다 : 변환 1 초를;

Answer 2

변화 자네 말이 맞아 부모

에 당신 :hover

.card { 
 
    -moz-perspective: 600; 
 
    -webkit-perspective: 600; 
 
    perspective: 600; 
 
    position: relative; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.card .side { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: inherit; 
 
    height: inherit; 
 
    -moz-box-shadow: 0 0 5px #888; 
 
    -webkit-box-shadow: 0 0 5px #888; 
 
    box-shadow: 0 0 5px #888; 
 
    -moz-transform-style: perserve-3d; 
 
    -webkit-transform-style: perserve-3d; 
 
    transform-style: perserve-3d; 
 
    -moz-backface-visibility: hidden; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-transition: all 0.4s ease-in-out; 
 
    -o-transition: all 0.4s ease-in-out; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
} 
 
.card .side.front { 
 
    z-index: 900; 
 
    -moz-transform: rotateY(0deg); 
 
    -ms-transform: rotateY(0deg); 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
} 
 
.card:hover .side.front { 
 
    -moz-transform: rotateY(180deg); 
 
    -ms-transform: rotateY(180deg); 
 
    -webkit-transform: rotateY(180deg); 
 
    transform: rotateY(180deg); 
 
} 
 
.card .side.back { 
 
    z-index: 800; 
 
    -moz-transform: rotateY(-180deg); 
 
    -ms-transform: rotateY(-180deg); 
 
    -webkit-transform: rotateY(-180deg); 
 
    transform: rotateY(-180deg); 
 
} 
 
.card:hover .side.back { 
 
    z-index: 800; 
 
    -moz-transform: rotateY(0deg); 
 
    -ms-transform: rotateY(0deg); 
 
    -webkit-transform: rotateY(0deg); 
 
    transform: rotateY(0deg); 
 
}

<article class="card"> 
 
    <section class="side front">front</section> 
 
    <section class="side back">back</section> 
 
</article>