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.


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!