css3에서 90도 변형되었을 때 요소가 보이지 않습니까?

왜 나는 왜 캔트가 어떤 관점으로 90deg 변형 된 이미지 2를 보는지 이해하지 못합니까? 다른 모든 브라우저에서 완벽하게 작동합니다. IE 그냥 바위. IT는 아무 이유없이 다음 몇 시간 동안 바쁘게합니다. HTML :css3에서 90도 변형되었을 때 요소가 보이지 않습니까?

<body> 

      <div class="scene"> 
      <div class="cube"> 
       <div class="cube-face cube-face-front"><img src="http://imageshack.us/a/img545/9813/58zj.jpg" alt="Images"> </div> 
       <div class="cube-face cube-face-top"> <img src="http://imageshack.us/a/img818/5776/8ik6.jpg" alt="Images"> </div> 

      </div> 
      </div>

CSS는이 :

body { 
    -webkit-transition: all .6s; 
    -moz-transition: all .6s; 
    -o-transition: all .6s; 
    -ms-transition: all .6s; 
    transition: all .6s; 
    width: 960px; 
    margin: 100px auto; 
} 

.scene { 
    margin-top: 50px; 
    width: 300px; 
    height: 300px; 
    -webkit-perspective: 3000px; 
    border: 5px solid black; 
} 

.cube { 
    cursor: pointer; 
    width: inherit; 
    height: inherit; 
    position: relative; 

    -webkit-transition: all 2s; 
    -moz-transition: all 2s; 
    -o-transition: all 2s; 
    -ms-transition: all 2s; 
    transition: all 2s; 

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

    -webkit-transform: rotateX(-15deg) rotateY(-15deg); 
    -moz-transform: rotateX(-15deg) rotateY(-15deg); 
    -o-transform: rotateX(-15deg) rotateY(-15deg); 
    -ms-transform: rotateX(-15deg) rotateY(-15deg); 
    transform: rotateX(-15deg) rotateY(-15deg); 
} 

.cube-face { 
    width: inherit; 
    height: inherit; 
    position: absolute; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)"; 
    filter: alpha(opacity=95); 
    opacity: 0.95; 
} 

.cube-face-front { 
    -webkit-transform: translate3d(0,0,0px); 
    -moz-transform: translate3d(0,0,0px); 
    -o-transform: translate3d(0,0,0px); 
    -ms-transform: translate3d(0,0,0px); 
    transform: translate3d(0,0,0px); 
} 

.cube-face-top { 
    -webkit-transform: rotateX(90deg) translate3d(0,-150px,150px); 
    -moz-transform: rotateX(90deg) translate3d(0,-150px,150px); 
    -o-transform: rotateX(90deg) translate3d(0,-150px,150px); 
    -ms-transform: rotateX(90deg) translate3d(0,-150px,150px); 
    transform: rotateX(90deg) translate3d(0,-150px,150px); 
} 

.cube:hover { 
    -webkit-transform: rotateX(-90deg) translate3d(0,150px,150px); 
    -moz-transform: rotateX(-90deg) translate3d(0,150px,150px); 
    -o-transform: rotateX(-90deg) translate3d(0,150px,150px); 
    -ms-transform: rotateX(-90deg) translate3d(0,150px,150px); 
    transform: rotateX(-90deg) translate3d(0,150px,150px); 
} 

img { 
    width: inherit; 
    height: inherit; 
}

Here my code pen My screen shot

출처

2013-10-10 Gautam Kumar

그것은 단순히 IE를 지원하지 않습니다. 보존-3D 재산 : IE10에서

부분 지원을 주장하는 http://caniuse.com/transforms3d

당신은 IE에서만 부분적인 지원을하고 있음을 알 수 있습니다 참조 변환 스타일을 지원하지 말합니다.

나는 polyfill을 찾았지만 현재 존재하는 것처럼 보이지 않습니다. 완전 지원을 원하면 jQuery에서이 작업을 수행해야합니다.

사이드 노트에서 나는 멋진 애니메이션을 가지고 있다고 생각하는데, 대부분의 사람들이 크롬이나 FF를 사용하고 있기 때문에 IE에 대해 걱정할 필요가 없다고 생각합니다. 너무 나쁜 IE는 뒤처져 야합니다.

출처

2013-10-10 18:21:00

감사합니다. –

IE10이 지금까지 따라 잡고있어 HTML5 사양의 약 99 %를 지원하고있어 몇 가지 중요한 사항을 빠뜨린 것만으로도 실망 스럽습니다. Javascript 해결 방법을 만들 가능성은 거의 없습니다. – Katana314

@ Katana314 예 - 매우 실망 스럽습니다. 특히 그들은 지금도 지원이 제한적인 모바일 장치를 개발하고 있기 때문에 특히 그렇습니다. –

css3에서 90도 변형되었을 때 요소가 보이지 않습니까?

답변

관련 문제