0
웹킷 변환을 사용하여 카드 반전 효과를 만듭니다. 나는 하나의 섹션에서 좋아하는대로 작동합니다. DIV가 중심 축을 중심으로 회전하여 카드가 뒤집어지는 모습을 보여줍니다.웹킷 3d 변환으로 회전 축 제어
이제 페이지 전환에 동일한 효과를 추가하고 싶습니다. 동일한 CSS 및 HTML 구조를 사용하고 있지만이 경우 중심 축을 중심으로 회전하는 효과가 없습니다.
대신에 변형이 중심이 아닌 객체의 왼쪽에 고정 된 y 축을 따라 회전하는 것처럼 보입니다 (카드 뒤집기보다는 문 열림처럼 보입니다).
필자는 스펙을 읽었지만 어떤 속성이 회전 축의 위치를 제어하는지 알 수 없습니다. 플립이 작동하려면이 부분을 추가하거나 변경해야합니까?
HTML 구조 :
<div id="frontbackwrapper">
<div id="front"></div>
<div id="back"></div>
</div>
과 CSS (.flip가 효과를 시작하는 jQuery를 통해 추가되는)
#frontbackwrapper {
position: absolute;
-webkit-perspective: 1000;
-webkit-transition-duration: 1s;
-webkit-transform-style: preserve-3d;
-webkit-transition: 1s;
}
#frontbackwrapper.flip {
-webkit-transform: rotateY(180deg);
}
#frontbackwrapper.flip #front,
#frontbackwrapper.flip #back {
-webkit-transform: rotateY(180deg);
-webkit-transition: 1s;
}
#front, #back {
position: absolute;
-webkit-backface-visibility: hidden;
}
#back {
-webkit-transform: rotateY(180deg);
}