CODEWITHSUNDEEP
javascriptcsscross-browsercss-transitions
Dudo
Dudo

Reputation: 4169

browser differences with Transform

So, I'm just gonna show you my code, maybe something will jump out at you. I'm playing with some CSS3 and Transform (in the form of a cube)

This is my test site - http://warm-cove-2672.herokuapp.com/

That looks good, and works great inside of Chrome...

Firefox it doesn't keep its shape when you rotate the cube (and it's smaller?)...

IE it doesn't work at all...

css

#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)"
});

Those rotate variables are either +90 or -90 depending on what's clicked.

Thoughts?

Upvotes: 0

Views: 133

Answers (1)

dc5
dc5

Reputation: 12441

Firefox isn't liking the perspective property without the 'px'.

Try changing it to:

-moz-perspective: 800px;

For IE10 - it doesn't support preserve-3d. If you want this to work for IE10 as well you will need to apply transforms to each side.

Stu Nicholls has a demo of this on CSS play: CSS play - 3D Animated Cube for Internet Explorer IE10

Upvotes: 1

Related Questions