CSS transform distorts the elements?

Why when using css transform properties, for example tranlate, scale, elements are distorted?
Even with the same translate for simple text block, or button it blurs, like a loss of focus, not to mention pictures.
Digging in all sorts of plugins, for example this tympanus.net/Blueprints/PageStackNavigation there all cool, but I have not found anything that I don't know everything by default, but the plugin nothing is blurred.

Please help me understand how to solve it. Why is this happening?
July 9th 19 at 11:21

Related questions

More answers about "CSS transform distorts the elements?"
2 answers
July 9th 19 at 11:23
Solution
Usually the problem is in the coordinates. Easy blur effect appears when an item falls out of the standard pixel grid. For items that use the transform, it is necessary to watch that.

Why is this happening? Then to ensure the smoothness of the animation (especially slow when the shift occurs just a couple of pixels).

How to fight? Always make sure all was clear coordinates in pixels (for this they need to be rounded in calculations and try not to use the interest without the need).
thank you. how to round of css then? or without js not to manage? rounding percentages? for example elem.style.transform = 'translate3d(0,0,' + parseInt( 50% ) + ')' like this? - jaquelin_Litt commented on July 9th 19 at 11:26
: meant for JS. On CSS so clearly can not control, but you can pre-calculate approximately. For example, the size of your block of 200 pixels, if you move it to the left by 50% then everything will be fine. BUT! If the width of the unit such as 249 pixels shift to the left by 50% will lead to blury and you did not round. In this case, it will only shift to a clear number of pixels. - Rex.Bayer90 commented on July 9th 19 at 11:29
: thank you very much) and how for example with the scale the same?) - jaquelin_Litt commented on July 9th 19 at 11:32
: well, Yes, you should always estimate the size of the distortion, try to make the angles were quite right, like 0-45-90, so much to look at eye. In General, this problem will sooner or later be past on retina screens where the pixel grid is much smaller, such problems do not seen. - Rex.Bayer90 commented on July 9th 19 at 11:35
in the case rotateY does not help, nothing helps) everything is blurred, even if the metrics are rounded - jaquelin_Litt commented on July 9th 19 at 11:38
: in fact, he and Rochat, try the advice from the second reply, suddenly additional optimization will help. Also, try to rotate the image a higher resolution than the nominal. - Rex.Bayer90 commented on July 9th 19 at 11:41
July 9th 19 at 11:25
Here is the solution:
Why, after transform: the rotate if blur get the content: photos, text, boarders etc?
does not help in the case of rotateY. .box { rotateY(40deg); will-change: transform; } - jaquelin_Litt commented on July 9th 19 at 11:28
still distorts( - Rex.Bayer90 commented on July 9th 19 at 11:31

Find more questions by tags CSS