webkit-transform

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders -webkit-transform: rotate(.7deg) translate3d( 0, 0, 0); edit There also a Webkit only style declaration -webkit-font-smoothing which takes the values none subpixel-antialiased antialiased where subpixel-antialiased is the default value. Alas, the subpixel antialias is no good solution for rotated text. The … Read more

Add a transform value to the current transforms that are already on the element?

You could use the += operator to append the rotateX(20deg) to the already existing transformation. el.style.webkitTransform += “rotateX(20deg)”; Note: I have used a different transformation in the below snippet for the visual effect but method is the same. window.onload = function() { var el = document.getElementsByTagName(“div”)[0]; el.style.webkitTransform += “rotateZ(20deg)”; console.log(el.style.webkitTransform); document.getElementById(“changeDeg”).onclick = changeDeg; //event handler … Read more