Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Realizar animaciones en la página es muy fácil con CSS3

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

Animación en CSS3 (VI)

Transform en Internet Explorer

Introducción

Esta página es continuacion de la anterior, "La propiedad transform" donde vimos los tipos de transformaciones. Aquí vamos a ver cómo compatibilizar las transformaciones con Internet Explorer 8 y versiones anteriores.

El filtro "matrix"

Aunque Internet Explorer (IE en adelante) soporta las trasnformaciones en su versiones 9 (prefijo -ms-) y 10 (forma estándar), las versiones anteriores, que son también bastante usadas por los internautas no las soportan.

Sin embargo IE tiene unos mecanismos llamados filtros que suplen esta deficiencia. En concreto el filtro "matrix" remplaza a las transformaciones.

Los filtros se utilizan igual que las propiedades de CSS3, en este caso sería la propiedad filter: cuyo valor suele ser siempre algo complicado.

La página IE Transform Translator

Sin embargo en esta ocasión tenemos una herramienta que nos facilita mucho el trabajo, y es la página www.useragentman.com/IETransformsTranslator. Si abres esta página verás en la parte de arriba un formulario como el siguiente:

En el recuadro grande escribimos el método o los métodos que tiene por valor la propiedad transform: y en los recuadros de debajo, donde pone "WIDTH" y "HEIGHT" escribimos el número de pixels en ancho y alto que tiene el elemento al que lo aplicamos. Pulsamos despues en el recuadro rojo donde pone "Translate to IE matrix".

Más abajo nos salen varios códigos. En el primer recuadro, donde pone "For CSS3 Savvy Browsers", nos sale el código para el resto de navegadores, es decir el que ya conocemos y hemos visto en la página anterior.

El segundo recuadro, donde pone "For IE", es el que nos interesa. En el tenemos varios códigos, el primero es el filtro para IE8, es una línea larga que empieza por -ms-filter: . El segundo filtro es para IE7 y IE6, y ocupa varias líneas. Este segundo filtro también funciona con IE8. Copiamos los filtros y los pegamos como una propiedad CSS más del elemento. Podemos copiar los dos o simplemente el segundo, ya que este ultimo también sirve para IE8.

Por último, al final del recuadro aparecen las propiedades margin-left: y margin-top: con unos valores. Debemos copiarlas y trasladarlas a nuestra página, de manera que sólo afecten al navegador IE. más adelante explicaremos como se hace esto.

Ejemplo de funcionamiento

Veámoslo con un ejemplo: queremos hacer en un elemento de 100px * 100px y color de fondo rojo una transformación con los siguientes métodos:

transform: rotate(30deg) scale(1.2,0.8) skew(10deg,5deg);

Escribimos primero el código para el elemento, dándole la anchura, altura, color de fondo y la propiedad transform para los distintos navegadores.

Después abrimos la página de "IE Transform Translator" y rellenamos el formulario con los métodos y los píxeles que tiene el elemento. Pulsamos en el cuadrado rojo y obtenemos el código del filtro el cual lo copiamos y pegamos en la regla CSS del elemento. El código quedará así:

#capa1 { width:100px; height: 100px; background: red; margin: 40px; float: right;
         transform: rotate(30deg) scale(1.2,0.8) skew(10deg,5deg);
         -webkit-transform: rotate(30deg) scale(1.2,0.8) skew(10deg,5deg);
         -o-transform: rotate(30deg) scale(1.2,0.8) skew(10deg,5deg);
         -ms-transform: rotate(30deg) scale(1.2,0.8) skew(10deg,5deg);
         filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=1.0042350191309564,
            M12=-0.21675562640063226,
            M21=0.66061392412528,
            M22=0.7986165114526304,
            SizingMethod='auto expand');
        }

Las propiedades margin: 40px; float: right; las hemos añadido para que se pueda ver en esta misma página a la derecha y sin que moleste al texto; sin embargo si tu estás siguiendo el ejemplo en otra página puedes eliminarlas y poner otras que creas oportunas.

Con el código que tenemos hasta ahora el elemento aparece con la misma forma que en los demás navegadores, pero no sale en el mismo sitio. Esto se debe a que el origen de coordenadas que se toma en el filtro es distinto. Mientras que en la propiedad transform se toma como origen el centro del elemento en el filtro de IE el origen está en la esquina superior izquierda.

Para corregir esto las últimas líneas del código en "useragentman" indican mediante las propiedades margin-left: y margin-top: los píxeles de desviación. Por tanto usaremos estas propiedades para corregir la desviación.

Si hemos puesto un margen al elemento, como es nuestro caso, debemos sumar (o restar si el número es negativo) los píxeles del margen con los que nos indica la página, para indicarlos como valor de estas propiedades.

los márgenes que indica la página son margin-left: -14px; margin-top: -26px;. nosotros le hemos puesto un margen de 40px por lo que deberemos poner 40-14=26 margin-top: 26px; y 40-26=14 margin-left: 14px;.

Ahora debemos hacer que estas propiedades se cumplan solamente para IE8 o inferior. para ello creamos otra hoja de estilos o etiqueta style type="text/css". La etiqueta de estilo CSS está dentro de otra etiqueta que filtra su contenido para que sólo afecte a IE8 o inferior, esta etiqueta es <!--[if lt IE 9]> ... <![endif]--> por lo tanto en la página (HTML) añadiremos el siguiente código:

<!--[if lt IE 9]>
<style type="text/css">
#capa1 { margin-top: 26px; margin-left:14px }
</style>
<![endif]-->

El resultado es el elemento que puedes ver a la derecha. Si abres esta pàgina con IE8 o inferior (iE7 o IE6) verás que el elemento se muestra igual que en otros navegadores.

Esto hace que las transformaciones puedan ser ya usadas de forma generalizada en la creación de páginas.

Otra cosa distinta es la aplicación de las transformaciones para animaciones, ya que las animaciones no son soportadas por todos los navegadores.

En la próxima página volvemos a las animaciones, veremos cómo pueden usarse las transformaciones en las animaciones.

Animaciones con transform

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com