Hola a todos, soy nuevo aquí, no hace mucho que uso css y tengo el siguiente problema:
Necesito rotar un div, he encontrado como hacerlo y funciona correctamente en todos los navegadores excepto en IE.
Aún no he probando en versiones anteriores pero en IE 9, si bien rota el div, muestra el fondo del png como negro y este es transparente.
He leído por ahí que IE tiene problemas con los PNG transparentes pero no encontré si hay alguna solución para esto.
Adjunto link para ver el problema en línea y mi código.
De antemano gracias a todos!!!
http://www.juanlaborde.com/rotacion/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rotación</title>
<style type="text/css">
body{
z-index:1;
background-color:#900;
margin:0;
font-family:Arial, Helvetica, sans-serif;
height:100%;
width:100%;
}
#cabecera_foto_user{
position:absolute;
z-index:5003;
width:74px;
height:74px;
top:2px;
left:16px;
-webkit-transform:rotate(-14deg); /* SAFARI & CRHOME ||| MAC desde: - hasta:6.0.2 & 24.0.1312.57 ||| PC desde: - hasta:5.1.7 & 24.0.1312.57 */
-moz-transform:rotate(-14deg); /* FIREFOX ||| MAC desde:18.0 - hasta: 18.01 ||| PC desde:18.0 - hasta: 18.1 */
-ms-transform:rotate(-14deg); /* IE ||| desde:9 - hasta:9 */
-o-transform:rotate(-14deg); /* OPERA ||| MAC desde: - hasta:12.12 ||| PC desde: - hasta:12.12 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=-0.46); /* IE ||| desde: - hasta:8 */
background-color:#000;
}
#cabecera_polaroid_user{
position:absolute;
z-index:5002;
width:96px;
height:116px;
top:-8px;
left:11px;
-webkit-transform:rotate(-14deg);
-moz-transform:rotate(-14deg);
-ms-transform:rotate(-14deg);
-o-transform:rotate(-14deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=-0.46);
}
</style>
</head>
<body>
<div id="cabecera_foto_user"></div>
<div id="cabecera_polaroid_user"><img src="img/layout/cabecera_polaroid_user.png" width="96" height="116" /></div>
</body>
</html>