Transform:rotate display a jagged solution on your phone

Transform:rotate is a simple and easy to use effect, but when displayed on the phone, there will be more pronounced aliasing.

The solution is also simple, with the addition of the outer container overflow:hidden margin:-1px can be solved.

Principle did not go deep into the theory is the vector and bitmap processing is not the same, the scheme also has a small problem is the picture is smaller ^_^ can use mobile phone to see the demo http://labs.aoao.org.cn/demo/transform-rotate/

Update: People are reacting to the problem on the computer instead.

I tested a new solution rotate3d border:1px solid transparent; , and the problem was solved.

Also found another small problem, scaled pictures using Rotate3d in the non-Retina screen will become blurred Dot point (belongs to the non-contrast not found), and with rotate this problem, the problem is found in the old IPad.

At the same time found another small problem, IOS 4.x want to smooth, zoom the image of which will be blurred the point (also belong to the non-contrast not found), the problem was found on the old IPhone.

Of course, the original scale image is a bad thing, but the scale of the picture here is intentional, we choose the appropriate solution in the corresponding scenario use it, the original plan is not to be used on the Computer browser

Transform:rotate display a jagged solution on your phone