CSS 3D Transforms Works at Random in Chrome 16

CSS 3D transforms works at random in Chrome 16

Chromium blacklisted your GPU and refuse to do any 3d CSS.

the solution is pretty easy: turn on "override software rendering list" option in "chrome://flags".

see https://github.com/bartaz/impress.js/issues/40

Does Chrome 12 really support CSS 3D transforms? Including on Linux?

Go to the Chromium web SCM interface and check that your GPU isn't blacklisted.

Also, go to chrome://gpu/ and check that Chrome reports 3D CSS as enabled.

CSS 3D transforms not working on Chrome 26 (Ubuntu 12.04)

It works perfectly fine in my Chrome browser. Try using the solution in this question:

CSS 3D transforms works at random in Chrome 16

Jerky CSS transform transition in Chrome

Transformations seem to work better than transitions in Chrome. Try this:

.social {  position: relative;  list-style: none;}.social > li > a {  text-indent: 100%;  white-space: nowrap;  overflow: hidden;  color: transparent;}.social > li > a {  text-indent: 100%;  white-space: nowrap;  overflow: hidden;  color: transparent;}.fbook,.twit,.tmblr,.pntrst,.insta {  background: url(http://placehold.it/350x150) center center;  width: 78px;  height: 90px;  background-size: cover;  float: left;  margin: 30px;  -webkit-transform: translate(0px, 0);  -webkit-transition: -webkit-transform 0.8s ease;  -moz-transform: translate(0px, 0);  -moz-transition: -moz-transform 0.8s ease;  transform: translate(0px, 0);  transition: -webkit-transform 0.8s ease;}.fbook {  background-position: 0 0}.twit {  background-position: -78px 0}.tmblr {  background-position: -156px 0}.pntrst {  background-position: -232px 0}.insta {  background-position: -310px 0}.fbook:hover,.twit:hover,.tmblr:hover,.pntrst:hover,.insta:hover {  -webkit-transform: scale(1.5);  -moz-transform: scale(1.5);  transform: scale(1.5);}

<ul class="social">  <li><a href="" class="fbook">Facebook</a>  </li>  <li><a href="" class="twit">Twitter</a>  </li>  <li><a href="" class="tmblr">Tumbler</a>  </li>  <li><a href="" class="pntrst">Pinterest</a>  </li>  <li><a href="" class="insta">Instagram</a>  </li>  <li><a href="" class="rss">RSS</a>  </li></ul>

Chrome not always applying perspective during css3 animation

I ran into this as well. I'm guessing it's a bug, but you can avoid it by adding

-webkit-backface-visibility: hidden;

to your html, body CSS rule.

Firefox CSS rotation differs from Chrome rotation

Based on the assumption that Firefox is just buggy in this regard (see analysis below), here is a workaround that works on Firefox. It wraps the #box element in another div, and only transitions the wrapper. And the wrapper is only ever rotated 90 degrees from the starting point in one direction at a time, so Firefox can't mess it up.

Once the transition finishes, the rotation is reset back to the starting position and simultaneously the inner box is rotated to the new position, both without transition, so the change is not visible.

The second important change is using the current computed transformation of #box and adding the rotation to that, so that we don't have to keep track of the rotations as we go.

Note that the order of rotations matters. To achieve what you're trying to do (rotating in "world space" rather than "object space"), you need to apply the rotations in reverse order. E.g. to rotate "right", use .css("transform", "rotateY(90deg) " + currentComputedTransform). This will resolve the issue you mentioned in comments where it appears to rotate around the wrong axis. See below for more information.

Note also that I don't allow a rotation to start if there's already one in progress, because that won't work. You could queue up keystrokes in an array if you want to be able to that, but you might also want to reduce the transition duration proportional to queue length in that case so it doesn't take forever.

Updated fiddle: https://jsfiddle.net/955k5fhh/7/

Relevant javascript:

$("#box").wrap("<div id='outer'></div>");
var pending=null;

function rotate(axis,angle,dir) {
    if (pending) return;
    $("#outer").removeClass().addClass(dir);
    var current=$("#box").css("transform");
    if (current=='none') current='';
    pending="rotate"+axis+"("+angle+"deg) "
      + current;
}

$("#outer").bind('transitionend', function() {
    $(this).removeClass();
    $("#box").css('transform',pending);
    pending=null;
});

$('#up').bind('click', function() {
    rotate('X',90,"up");
});

$('#down').bind('click', function() {
    rotate('X',-90,"down");
});

$('#right').bind('click', function() {
    rotate('Y',90,"right");
});

$('#left').bind('click', function() {
    rotate('Y',-90,"left");
});

---

Previous analysis

I've been playing with JS-based solutions and I came across this useful post https://gamedev.stackexchange.com/a/67317 - it points out that to rotate objects in "world space" instead of "object space", you just need to reverse the order of the rotations.

Based on that, I simplified your fiddle to the following:

var rot = "";
var tr = "translateZ(-50px)";

$('#up').bind('click', function() {
    rot=" rotateX(90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#down').bind('click', function() {
    rot=" rotateX(-90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#right').bind('click', function() {
    rot=" rotateY(90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

$('#left').bind('click', function() {
    rot=" rotateY(-90deg)"+rot;
    $("#box").css("transform",tr+rot);
});

https://jsfiddle.net/955k5fhh/ (note that it's not a complete solution, because eventually the rot string will get too long)

And on Chrome, that behaves as expected. And once again, Firefox gets it wrong, even if you're just chaining e.g. a sequence of rotateX(90deg) transformations.

So I went one step further and rolled up adjacent rotations in the same axis...

var rots = [];
var tr = "translateZ(-50px)";

function transform() {
    var tf = "translateZ(-50px)";
    rots.forEach(function(rot) {
        tf += " rotate" + rot[0] + "(" + rot[1] + "deg)";
    });
    console.log(tf);
    $("#box").css("transform", tf);
}

function addRot(axis,angle) {
    if (rots.length==0 || rots[0][0]!=axis) {
        rots.unshift([axis,angle]);
    } else {
        rots[0][1]+=angle;
    }
    transform();
}

$('#up').bind('click', function() {
    addRot('X',90);
});

$('#down').bind('click', function() {
    addRot('X',-90);
});

$('#right').bind('click', function() {
    addRot('Y',90);
});

$('#left').bind('click', function() {
    addRot('Y',-90);
});

https://jsfiddle.net/955k5fhh/2/

Which, again, works well in Chrome, and works a bit better in Firefox, but still once you switch axes, you can wind up spinning the wrong way. And similarly if you click a button before a transition completes, it can spin the wrong way.

So I would conclude that unfortunately yes, Firefox is just buggy in this, but at least there are workarounds.

css3 transition(rotation) does not work properly in Chromium

After hours searching on Google, I've finally found an answer - not using backface-visibility at all.

Here's the code:

.back {
    -webkit-transform: rotateY(180deg);
}
/*
Flipping the '.flipper' is simple, just rotate it 180 degrees.
*/
.flipper {
-webkit-transform-style: preserve-3d;
-webkit-transition-property: all;
-webkit-transition-timing-function: linear;
}

.flipper:hover {
    -webkit-transform: rotateY(180deg); 
}
/*
Flipping the faces is not so simple when the browser doesn't support the
'-webkit-backface-visibility' property correctly! We have to fake it so
that the opacity of the '.face' changes such that, when it's at 90 degrees
rotation, the opacity is 0.

The transition from opacity 1 to 0, or vice-versa, is quick but delayed
in both directions for the face that is being revealed. In other words, as
the front face nears 90 degrees on its way to the back, it suddenly changes
its opacity. As the back face, coming from back to front, passes 90 degrees
it suddenly increases it opacity.
*/
.front {
-webkit-transition-property: opacity;
-webkit-transition-timing-function: linear;
}
.flipper:hover .back, .flipper .front { opacity: 1; }
.flipper:hover .front, .flipper .back { opacity: 0; }
 /*timings*/
.flipper { -webkit-transition-duration: 0.6s; } /* 100% */
.front { -webkit-transition-duration: 0.06s; } /* 10% */
.flipper:hover .back, .flipper .front { -webkit-transition-delay: 0.3s; } /* 50% */
.flipper:hover .front, .flipper .back { -webkit-transition-delay: 0.24s; } /* 40% */

Code taken(and adjusted just a bit to fit my markup&timing needs) from: https://gist.github.com/mattdenner/518776

---

Related Topics