변형 된 브라우저의 차이점

Question

그래서, 제 코드를 보여 드리겠습니다. 좀 CSS3와 함께 연주하고

이 내 테스트 사이트 (큐브의 형태로) 변환거야 - ... 좋아 보인다, 그리고 크롬의 큰 내부 작동 http://warm-cove-2672.herokuapp.com/

파이어 폭스 큐브를 회전 할 때 그것의 모양을 유지하지 않습니다 (그리고는 작은입니까?) ...

IE가 전혀 작동하지 않습니다 ...

CSS

,451,515,

#camera { 
    position: relative; 
    -webkit-perspective: 800; 
    -webkit-perspective-origin: 50% 200px; 
    -moz-perspective: 800; 
    -moz-perspective-origin: 50% 200px; 
    -ms-perspective: 800; 
    -ms-perspective-origin: 50% 200px; 
    -o-perspective: 800; 
    -o-perspective-origin: 50% 200px; 

    #cube { 
    position: relative; 
    margin: 0 auto; 
    height: 400px; 
    width: 400px; 
    -webkit-transition: -webkit-transform 2s linear; 
    -webkit-transform-style: preserve-3d; 
    -moz-transition: -moz-transform 2s linear; 
    -moz-transform-style: preserve-3d; 
    -ms-transition: -ms-transform 2s linear; 
    -ms-transform-style: preserve-3d; 
    -o-transition: -o-transform 2s linear; 
    -o-transform-style: preserve-3d; 

    .face { 
     position: absolute; 
     height: 400px; 
     width: 400px; 
     padding: 5px; 
     border: 20px solid #333; 
     text-align: center; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing:  border-box; 
     -o-box-sizing:  border-box; 
     box-sizing:   border-box; 
     font-size: 400px; 
     line-height: .9; 
    } 

    .a { 
     background-color: rgba(255,255,255, 1.0); 
     -webkit-transform: translateZ(200px); 
     -moz-transform: translateZ(200px); 
     -ms-transform: translateZ(200px); 
     -o-transform: translateZ(200px); 
    } 

    .b { 
     background-color: rgba(255,255,255, 1.0); 
     -webkit-transform: rotateY(-90deg) translateZ(200px); 
     -moz-transform: rotateY(-90deg) translateZ(200px); 
     -ms-transform: rotateY(-90deg) translateZ(200px); 
     -o-transform: rotateY(-90deg) translateZ(200px); 
    } 

    .c { 
     background-color: rgba(255,255,255, 1.0); 
     -webkit-transform: rotateY(180deg) translateZ(200px); 
     -moz-transform: rotateY(180deg) translateZ(200px); 
     -ms-transform: rotateY(180deg) translateZ(200px); 
     -o-transform: rotateY(180deg) translateZ(200px); 
    } 

    .d { 
     background-color: rgba(255,255,255, 1.0); 
     -webkit-transform: rotateY(90deg) translateZ(200px); 
     -moz-transform: rotateY(90deg) translateZ(200px); 
     -ms-transform: rotateY(90deg) translateZ(200px); 
     -o-transform: rotateY(90deg) translateZ(200px); 
    } 
    } 
} 

JS

$('#cube').css({ 
    "webkitTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)", 
    "mozTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)", 
    "msTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)", 
    "OTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)", 
    "transform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)" 
}); 

그 변수 중 하나 +90 또는이다 -90 회전을 클릭 있는지에 따라 달라집니다.

생각하십니까?

Answer 1

Firefox는 'px'가없는 perspective 속성을 선호하지 않습니다. 로 변경

시도 : IE10에 대한

-moz-perspective: 800px; 

- 그것은 preserve-3d를 지원하지 않습니다. IE10에서도이 기능을 사용하려면 각면에 변형을 적용해야합니다. CSS play - 3D Animated Cube for Internet Explorer IE10