19 de Mayo de 2013

Notas Espacio Programación

galería de imágenesvideo
AUTOR: Andrés Fernández
FECHA: 26/5/2010
LECTURAS:7547
Buscar Notas
volver
Otra manera de girar imágenes u otros elementos sin usar canvas.

Girando objetos sin canvas.

Hoy en día, gracias a la incorporación de transformaciones css por parte de la mayoría de los navegadores modernos, es posible girar cualquier tipo de objeto html sin muchas complicaciones.
En este artículo mostramos cómo girar imágenes usando el elemento html canvas. Ahora veremos cómo hacer lo mismo, pero para cualquier elemento html, también de manera compatible con la mayoría de los navegadores modernos (Safari, Chrome, Ópera, Firefox y Explorer), y sin usar canvas, sólo css.
Primero, un ejemplo:

Ilustración by juliocfg

Y este es el código utilizado:
<!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>Girar Objetos</title>
<style>*{margin:0}</style>
<script>
function rotate(angle){
    if (angle >= 0) {
        var rotation = Math.PI * angle / 180;
    } else {
        var rotation = Math.PI * (360+angle) / 180;
    }
    var costheta = Math.cos(rotation);
    var sintheta = Math.sin(rotation); 
    if(!window.ActiveXObject){
        this.style.position='relative';
        var width = Math.abs(costheta*this.offsetWidth) + Math.abs(sintheta*this.offsetHeight);
        var height = Math.abs(costheta*this.offsetHeight) + Math.abs(sintheta*this.offsetWidth);
        this.style.left=-(this.offsetWidth-width)/2+'px';
        this.style.top=-(this.offsetHeight-height)/2+'px';
        this.style.webkitTransform ='rotate('+angle+'deg)';    
        this.style.MozTransform='rotate('+angle+'deg)';    
        this.style.OTransform='rotate('+angle+'deg)';
        this.style.transform='rotate('+angle+'deg)';
    }else{
        this.style.filter="progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";
        this.filters.item(0).M11 = costheta;
        this.filters.item(0).M12 = -sintheta;
        this.filters.item(0).M21 = sintheta;
        this.filters.item(0).M22 = costheta; 
    }
}
onload=function(){
    rotate.call(document.getElementById('im'),50);    
}
</script>  
</head>

<body>
<img src="Dr__House___Illustrator_Vector_by_juliocfg.jpg" width="400" height="316" />
<br />
<img id="im" src="Dr__House___Illustrator_Vector_by_juliocfg.jpg" width="400" height="316" />
</body>
</html>
Home - Quiénes Somos - Portfolio - Espacio Diseño - Espacio Programación - Capacitación - Contacto - RSS