Tengo un div con una rotación de 20°.
La idea es que cuando se le pase el cursor encima, el div muestre cierta transparencia.
Código CSS:
Ver original.A {
position:relative;
top:0px;
left:0px;
width:200px;
height:70px;
background-color:green;
color:white;
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256686, M21=0.3420201433256686, M22=0.9396926207859084, SizingMethod='auto expand');}
.A:hover {filter:alpha(opacity=50);}
Si se prueba esto en IE8, se verá que el efecto hover hace un extraño: pone transparencia al div, sí, pero también muestra el div sin rotación, o sea, en horizontal.
¿En qué momento el hover le dice al div que la rotación es 0, o que quite la rotación?
Ya probé añadir al hover el filtro IE para la rotación:
Código CSS:
Ver originalfilter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9396926207859084, M12=-0.3420201433256686, M21=0.3420201433256686, M22=0.9396926207859084, SizingMethod='auto expand');
Esto parece buena idea. La bronca es que cierra un hoyo y abre otro.
Añadiendo la rotación al hover, sí, al pasar el cursor encima del div, éste mantiene su rotación de 20°, pero ya no funciona la transparencia.
Parece como si no se pudiera aplicar al mismo tiempo dos filtros IE a un elemento.
¿Cómo hacer que el filtro de transparencia y el filtro de rotación en IE funcionen al mismo tiempo?