깜박임없이 위치 CSS3 크로스 브라우저 카드 플립 만들기 (Z- 인덱스/관점의 문제?) 내 테스트 사이트에서 작업하는 간단한 크로스 브라우저의 3D CSS3 카드 플립 효과를 얻기 위해 노력하고

Question

현재.

결과는 이미지의 절반이 차례로 사라도 꽤 깜박 파이어 폭스에서하지만 웹킷에서 잘 작동합니다.

은 이미 내가 거기에 어려움을 찾을 수 없습니다 때문에, 지금 카드의 배경과 관점 값의 Z- 인덱스 위치를 의심

http://developer.apple.com/library/safari/#samplecode/CardFlip/Introduction/Intro.html%23//apple_ref/doc/uid/DTS40007646-Intro-DontLinkElementID_2

처럼 웹 작업 예제에 대해 코드를 확인 서로 대항하는 것 - 비록 그들이 지금까지 어떻게 그들이 관련되어 있는지를 알 수는 없었다. 여기

은 내가 사용하는 CSS입니다 :

'#의 t02panel가' '#의 t2front'과 '#의 t2back'의 두 얼굴 인과 카드 역할을합니다. 뿐만 아니라 (논리적으로 해를 안 둘, 나 ...해야하는) #의 t02back의이면에는 숨기기

파이어 폭스에서 깜박임의 모양을 저장하지만, 웹킷과 좋은하지 않았다.

 #t02front { -webkit-backface-visibility: hidden; } 
     #t02back { -webkit-transform: rotateY (-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg);  transform: rotateY(-180deg); }   
     #t02front, #t02back { position:absolute; z-index: 1; box-sizing: border-box; 
            -moz-backface-visibility: hidden; -o-backface-visibility: hidden;  backface-visibility: hidden; } 

     #topic02  #t02panel  { -webkit-perspective: 600;        -moz-perspective: 600;        -o-perspective: 600;       perspective: 600; 
              -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);  -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); -o-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5); 
              -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     -o-transform-style: preserve-3d;    transform-style: preserve-3d; 
              -webkit-transition: -webkit-transform 1s;    -moz-transition: -moz-transform 1s;     -o-transition: -o-transform 1s;     transition: transform 1s; 
              -webkit-transition: all 1.0s linear;     -moz-transition: all 1.0s linear;     -o-transition: all 1.0s linear;     transition: all 1.0s linear; } 
     #topic02:hover #t02panel  { -webkit-transform: rotateY(180deg);      -moz-transform: rotateY(180deg);     -o-transform: rotateY(180deg);     transform: rotateY(180deg);  } 

브라우저에서 작동하는 방법에 대한 의견은 매우 높이 평가됩니다 !!! 나는이 있으리라 믿고있어

Answer 1

는 웹킷 버그입니다. 여기에 해결 방법이 있습니다. 당신이 적용 할 경우 카드가 뒤집 때 더 이상 공개되는 이미지에 다음과 깜박 거림을 볼 수 있습니다 :

-webkit-transform: translateZ(-1px); 

이 전면 사이의 분리의 정도를 창조하는 3D 공간에서 뒤쪽으로 그 이미지 x 1 픽셀을 밀어 및 백 이미지. 1px 이상으로 만들면 요소가 분리되어 있음을 알 수 있지만 1px만으로는 차이가 발생하지 않습니다.

당신은 전면 이미지에 -webkit-transform: translateZ(1px);를 적용 할 수 있지만, 당신이 볼 수 있습니다, 그것은 조금 더 큰 얻을 수있는 이미지를 발생합니다.

Answer 2

흠. Z에서 "뒷면"이미지를 뒤로 이동하면 실제로 깜박임을 제거하는 데 도움이되지만 회전 중에 바깥 쪽 요소의 배경 뒤에 이미지의 절반이 완전히 사라지는 문제는 해결되지 않습니다.

또한 배운 : 변환 - 매개 변수에 여러 인수를 좋아하지 않는다 (Safari에서 테스트) 웹킷을.

는 원하는 결과를 만들기 위해

-webkit-transform: rotateY (-180deg); 
    -webkit-transform: translateZ(-1px); 

보다는

-webkit-transform: rotateY (-180deg) translateZ(-1px); 

로 가야했다.