August 23, 2012

Webkit CSS3 Rotate Transform Flicker Fix

While messing about with this site I found that the hover rotating logo in the top left sometimes flickers back to its original position if you move the mouse off whilst it’s rotating. A simple fix was to add the following under the transform declaration.

figure#user_logo div.logo:hover{
  -webkit-transform:rotate(30deg);
  -moz-transform:rotate(30deg); 
  -o-transform:rotate(30deg);
 
  /* Webkit Rotation Flicker Fix */
  -webkit-transform-style: preserve-3d;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

css.php