CSS 3D 변형 속성

Question

CSS3 변환 속성을 사용하여 '뒤집기'효과를 만듭니다.

크롬, 파이어 폭스, 사파리의 최신 버전에서는 잘 작동하지만 IE9와 오페라는 2D 변환 만 지원하기 때문에 어떤 종류의 대체 기능을 구축하기가 어렵습니다.

나는 현재 내가 작업하고있는 코드를 보여주기 위해 피들 (fiddle)을 만들었습니다.

여기에 링크를 찾아주세요 : 나는 반드시 단지 IMG1 인 경우에 공중 선회 IMG2가 상단에 등 페이드 대체를 만들 브라우저에서 효과를 다시 시도하고 있지 않다 http://jsfiddle.net/montyhog/SaYUe/9/

합니다.

<div class="h1older"> 
<div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
<div class="flipper"> 
<div class="front"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/meds.png" /></div> 
<div class="back"><img src="http://www.hogshouse.com/fbtest/img/cdartwork/back.png" /></div> 
</div> 
</div> 
</div> 

그리고 CSS :

.h1older { 
    width: 400px; 
    height: 400px; 
    border: 1px #ff00d5 dashed; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 

.flip-container { 
    perspective: 1000; 
    -webkit-perspective: 1000; 
    -moz-perspective: 1000; 
} 

.flip-container:hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 

.flip-container:OnClickListener .flipper, .flip-container.OnClickListener .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 

.flip-container:focus .flipper, .flip-container.focus .flipper { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
     -moz-transform: rotateY(180deg); 
} 


.flip-container, .front, .back { 
    width: 100%; 
    height: 100%; 
} 

.flipper { 
    transition: 0.6s; 
    -webkit-transition: 0.6s; 
    -moz-transition: 0.6s; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    position: relative; 
} 

.front, .back { 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.front { 
    z-index: 2; 
    background-color: #139eef; 
} 

.back { 
    transform: rotateY(180deg); 
    -webkit-transform: rotateY(180deg); 
    -moz-transform: rotateY(180deg); 
    background-color: #ff0000; 
} 

.front img { 
    width: 100%; 
} 

.back img { 
    width: 100%; 
} 

Answer 1

-o-tramsform: 

및

이

-ms-transform: 

전환이 IE와 오페라에 대한 작업을해야 다음

는 HTML입니다. 당신이 만드는 모든 전환에 대해 2 alt 행을 추가로 만듭니다.