html - origin - transform skew 45 deg
-webkit-transform rotar-Imágenes pixeladas en Chrome (9)
Usando -webkit-transform: rotate(-5deg); en un contenedor div, Chrome representa la cuadrícula de imágenes con bordes realmente irregulares. Mientras que en FF ( -moz-transform: -ms-filter: e IE ( -ms-filter: todo parece estar bien, vea la diferencia a continuación.
¿Hay algo que pueda hacer al respecto?
¿Has probado la regla CSS -webkit-transform-style: preserve-3d; ?
También podría tratar de rotar el eje específico con -webkit-transform: rotateZ(-5deg); .
Este es un error de WebKit que ya se ha corregido y la corrección aparecerá en Chrome 15 .
La solución alternativa hasta que todos se actualicen a más de 15 años es aplicar -webkit-backface-visibility: hidden; al elemento que se gira. Trabajó para mi. Eso desencadena antialiasing en el elemento.
Esto no será apropiado para todos los usos, pero cuando tiene control sobre el marcado y no le importa agregar un <div> adicional, puede hacer uso del contenido generado para limpiar dramáticamente los bordes de las imágenes giradas en Chrome. Esto funciona porque Chrome aplicará suavizado al contenido generado que se coloca sobre la imagen.
Puede ver un ejemplo aquí: http://jsfiddle.net/cherryflavourpez/2SKQW/2/
La primera imagen no tiene nada hecho, la segunda tiene un borde aplicado para que coincida con el color de fondo, no hay ninguna diferencia que pueda ver.
La tercera imagen div tiene algo de contenido generado con un borde colocado alrededor del borde. Pierdes un píxel alrededor del borde, pero se ve mucho mejor. El CSS es bastante auto explicativo. Esto tiene la ventaja de no requerir que crees el borde en tu imagen, lo que me parece un precio demasiado grande.
Me encontré con este problema en Chrome 33 (Windows 7). Intenté todas las soluciones sugeridas en esta página. La miseria siguió. Mi rotación fue bastante simple:
transform: rotate(40deg);
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
Encontré this respuesta y después de algunos experimentos rápidos descubrí que la siguiente combinación funciona perfectamente en Chrome:
-webkit-backface-visibility: hidden;
outline: 1px solid transparent;
Aún no he probado el navegador cruzado. No tengo idea de qué errores adicionales presenta esto. Usted ha sido advertido. Espero que esto señale a alguien en la dirección correcta.
Nota al -webkit-backface-visibility: hidden; : durante mis experimentos, encontré que -webkit-backface-visibility: hidden; (por sí solo) eliminó el antialiasing de imágenes no transformadas.
Para mí fue la propiedad CSS de perspectiva la que hizo el truco:
-webkit-perspective: 1000;
Completamente ilógico en mi caso, ya que no uso transiciones en 3D, pero funciona de todos modos.
Parece ser un error Antialiasing en el motor de webkit. Se ha presentado un informe pero aún no se ha resuelto .
Puede intentar agregar un borde del mismo color que su fondo para intentar minimizar el efecto.
Podrías echarle un vistazo a la respuesta a la transformación css, bordes dentados en cromo
Me ayudó
De la respuesta aceptada:
En caso de que alguien busque esto más adelante, un buen truco para deshacerse de esos bordes irregulares en las transformaciones CSS en Chrome es agregar la propiedad CSS
-webkit-backface-visibilitycon un valor dehidden. En mis propias pruebas, esto los ha suavizado por completo. Espero que ayude.
Puede agregar sombras de cuadro a sus imágenes con el mismo color que su fondo, que reducen el efecto.
-webkit-transform: rotate(-5deg) translate3d( 0, 0, 0);
¿El truco para Chrome?