css3 : 호버 애니메이션이 파이어 폭스에서 작동하지 않습니다.

Question

페이지 뒤집기 효과를 생성 한 CSS3 코드를 만들었습니다.

캡슐화 된 div 태그 세 개가있는 div는 먼저 일반 페이지를 캡슐화하고 원근감과 변형 스타일을 설정합니다. 페이지를 포함하는 두 번째 div는 X 축을 통해 몇도 회전 (등각 투영법이 필요함)하고 마지막으로 내부 div는 결정된 색상 및 크기 특성을 가진 페이지를 만듭니다.

이 내부 div에는 애니메이션 속성이있는 호버 (hover) 의사가 있으며,이를 수행 할 변형을 나타냅니다 (이 경우에는 Y 축을 통해 자신을 뒤집음). 이 purpouse에는 변형 원점과 rotate3d 속성이있는 키 프레임이 있습니다.

이는 Chrome 웹킷에서는 정상적으로 작동하지만 Firefox에서는 정상적으로 작동하지 않습니다. Chrome에서 마우스 오버가 완료되면 마우스가 회전으로 인해 페이지에 더 이상 없더라도 페이지가 완전히 뒤집힐 때까지 뒤집기를 계속합니다. 그러나 Firefox에서는 작은 뒤집기 동작을하지만 마우스가 페이지에 남아 있더라도 초기 상태로 돌아갑니다.

애니메이션 재생 상태로 시도했습니다. 실행 중입니다. : the hover pseudo,하지만 둘 다 작동하지 않습니다.

어떤 도움이 필요합니까? 나는 -moz 문법이 -webkit에서와 같이 훌륭하다는 것을 확신 할 수있다. 감사!! 파이어 폭스 잘못된 방향으로 요소의 회전 rotate3d을 사용하는 경우> = 각도를 지정하는 즉시 흥미롭게

.box { 
    position: relative; 
    width: 50px; 
    height: 90px; 
    ... 
} 

.box:hover .rotateaux { 

다음 .box 요소

Answer 1

세트 width 및 height와 .rotateaux 소자 대신 떠오르게 위해 사용 180°, - 부호를 무시하고 그 원인을 모릅니다. 따라서 Firefox가 올바르게 처리하는 나의 예에서는 rotateY을 사용했습니다.

http://jsfiddle.net/V7Chp/

<div class="book"> 
    <div class="box"> 
     <div class="rotateaux"></div> 
    </div> 
</div> 

.book { 
    position: absolute; 
    z-index: -1; 
    top: 80px; 
    right: 300px; 

    -webkit-perspective: 300px; 
     -moz-perspective: 300px; 
      perspective: 300px; 

    -webkit-perspective-origin: 0% 50%; 
     -moz-perspective-origin: 0% 50%; 
      perspective-origin: 0% 50%; 
} 

.box { 
    position: relative; 
    width: 50px; 
    height: 90px; 

    -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
      transform-style: preserve-3d; 

    -webkit-transform: rotateX(70deg); 
     -moz-transform: rotateX(70deg); 
      transform: rotateX(70deg); 
} 
.rotateaux { 
    position: relative; 
    background: green; 
    width: 50px; 
    height: 90px; 

    -webkit-transform-origin: 0% 50%; 
     -moz-transform-origin: 0% 50%; 
      transform-origin: 0% 50%; 
} 

.box:hover .rotateaux { 
    -webkit-animation: example 1.75s ease-in-out 0s infinite alternate; 
     -moz-animation: example 1.75s ease-in-out 0s infinite alternate; 
      animation: example 1.75s ease-in-out 0s infinite alternate; 
} 

@-webkit-keyframes example { 
    from { 
     -webkit-transform: rotateY(0deg); 
    } 
    to { 
     -webkit-transform: rotateY(-180deg); 
    } 
} 

@-moz-keyframes example { 
    from { 
     -moz-transform: rotateY(0deg); 
      transform: rotateY(-180deg); 
    } 
    to { 
     -moz-transform: rotateY(0deg); 
      transform: rotateY(-180deg); 
    } 
} 

@keyframes example { 
    from { 
     transform: rotateY(0deg); 
    } 
    to { 
     transform: rotateY(-180deg); 
    } 
}