es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Cómo habilitar la transformación de CSS en IE6-8 [Consejo rápido]

Los navegadores modernos tienen mucho soporte para la mayoría de las propiedades de CSS3. En esencia, puede aplicar animaciones CSS, transformaciones y gradientes entre otras cosas con facilidad. Sin embargo, todavía hay muchos usuarios de versiones anteriores de las versiones de Internet Explorer que no son exactamente compatibles con las nuevas propiedades de CSS3 . En este artículo, compartiré consejos rápidos sobre cómo habilitar la transformación de CSS en IE6-8 .

La propiedad Transformación CSS nos permite transformar un elemento en espacio bidimensional o tridimensional . Puede traducir, escalar, girar y sesgar un elemento utilizando CSS Transform. Para navegadores modernos como Firefox, el navegador basado en Opera y Webkit admite CSS Transform con sus prefijos específicos del proveedor (usando -moz-transform, -o-transform y -webkit-transform respectivamente), pero no lo encontrará en Internet Explorer. Por lo tanto, en este documento, usaré una biblioteca de JavaScript llamada cssSandpaper que permite las Transformaciones de CSS entre navegadores, incluso en el viejo IE.

Empezando

Primero, descargue cssSandpaper del Repositorio de Github. Luego, incluya las siguientes bibliotecas de JavaScript necesarias que vienen con cssSandpaper.

La propiedad -sand-transform

cssSandpaper presenta una nueva propiedad prefijada para aplicar la transformación . Esta nueva propiedad se puede utilizar junto con los otros prefijos de proveedor de navegador como -moz-transform, -webkit-transform u otras propiedades prefijadas del navegador, como las siguientes:

 #container {-moz-transform:  ; -webkit-transfrom:  ; -sand-transform:  ; transformar:  ; } 

El cssSandpaper hereda las funciones CSS estándar para realizar la transformación, como la rotación y la escala. La siguiente es una lista de las funciones que puede usar dentro de la propiedad -sand-transform .

  • rotar (ángulo) se usa para rotar un elemento en grados o radianes. por ejemplo: -sand-transform: rotate(45deg) : -sand-transform: rotate(45deg)
  • scale (sx [, sy]) se usa para escalar un elemento. eg: -sand-transform: scale(1[, 2]) esto significa que escalamos el elemento en el eje X según el tamaño original y en el eje Y como el doble del tamaño original.
  • skewX (ax) y skewY (ay) se utilizan para sesgar un elemento alrededor de los ejes xey en los ángulos especificados en grados o radianes. por ejemplo: skewX (30deg)
  • la matriz (a, c, b, d, tx, ty) se utiliza para hacer una matriz de transformación 2D compuesta por los seis valores especificados.

Ejemplo de uso

Suponiendo que hemos construido una caja usando un

. Y ahora quiere que la caja se mueva 200px horizontalmente desde su posición inicial, y al mismo tiempo gírela 45 grados. Puede usar cssSandpaper para lograr este efecto, de la siguiente manera:

 #box {ancho: 150px; altura: 100px; -sand-transform: translate (200px, 0) rotar (45deg); } 

Puedes ver la demostración a continuación. Tenga en cuenta que también debe verlo en Internet Explorer 6-8.

  • Ver demostración
  • Descargar Fuente

Conclusión

Esta podría no ser la solución más elegante, ya que necesitamos apilar varias bibliotecas de JavaScript para lograr este efecto simple. Pero en caso de que su jefe o cliente insista en habilitar la rotación en Internet Explorer 8 (por cualquier razón sin sentido), puede usar cssSandpaper para que esto suceda.

Transforma tus fotos en historias de video con Pearl

Transforma tus fotos en historias de video con Pearl

Compartimos (a veces, compartimos) nuestras vidas en las redes sociales tanto que se ha convertido en una forma de vida para muchos usuarios en línea . Claro, a veces las personas van por la borda con las fotos de boda, fotos de bebés, fotos de mascotas, fotos de comida, fotos de viajes, etc. y mientras algunos de nosotros nos quejamos, casi todo lo que alguien hace es la preocupación de otro usuario .Un

(Consejos de tecnología y diseño)

10 emprendedores tecnológicos influyentes y sus contribuciones

10 emprendedores tecnológicos influyentes y sus contribuciones

Los empresarios construyen muchas de las cosas que usas y amas hoy . Piénsalo. Alguien tuvo que idear una idea y luego hacer el esfuerzo de construirla. Alguien tenía que creer en esa idea y ahorrar el dinero para hacerlo realidad. Y cuando finalmente reveles tu creación, tienes que esperar que tenga éxito para justificar el esfuerzo puesto en ella. El

(Consejos de tecnología y diseño)