Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 transform rotate causing 1px shift in Chrome

People also ask

Can I use CSS transform rotate?

The transform CSS property lets you rotate, scale, skew, or translate an element.

How do you rotate objects using CSS3?

rotate() The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.

How do I rotate an image 90 degrees CSS?

We can add the following to a particular tag in CSS: -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); In case of half rotation change 90 to 45 .

How do I rotate an image in CSS3?

css file, stylesheet, or <style> tags, you can use the CSS class name in any of your image tags. To rotate an image by another measure of degrees, change the "180" in the CSS code and <img> tag to the degree you desire.


Actually just add this to the site container which holds all the elements: -webkit-backface-visibility: hidden;

Should fix it!

Gino


I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.