EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            Transiciones en CSS
            Transiciones en CSS, estilos diferentes entre estados
            22/10/2019
            propiedad overflow css
            Propiedad CSS overflow, excedente de contenido
            25/10/2019

            Transformaciones en CSS: rotar, torcer, escalar o deplazar

            Transformaciones en CSS

            Transformaciones en CSS

            Tabla de contenidos

            • Transformaciones en CSS
            • Tipos de transformaciones
            • Ejercicios propuestos

            Transformaciones en CSS

            Las transformaciones CSS nos permiten rotar, torcer, escalar o desplazar los elementos de nuestra página web. Este tipo de propiedades de CSS3 son muy interesantes para convertir el lenguaje de hojas de estilo en un sistema capaz de realizar todo tipo de efectos visuales. Las dos propiedades que nos sirven para definir las transformaciones son transform y transform-origin.

            • transform-originLa posición de origen que se utilizará para la transformación es por defecto el lado superior izquierdo del elemento.
            • transformLa posición de origen para realizar la transformación es el eje central del elemento.

            Tipos de transformaciones

            Las transformaciones que podemos aplicar son las siguientes:

            • Scale: modifica el tamaño de los elementos. La función scale () se establece con uno o dos valores, que representan la cantidad de escala que se aplica en cada dirección: scale (x) o scale(x,y). Se define mediante un valor numérico de manera que cuando un valor de coordenadas está fuera del rango [-1, 1], el elemento crece a lo largo de esa dimensión. Cuando está dentro del rango el elemento se encoge.
            transform: scale(0.5); /* Escala el elemento a la mitad */
            • Translate: cambia la posición del elemento hacia la izquierda, derecha, arriba o abajo. La función translate() se establece con uno o dos valores: translate(x) o translate(x,y). Los valores x e y son los vectores de translación en las coordenadas x e y. Sus valores pueden estar definidos en píxeles, porcentajes,…
            transform: translate(10px); /* Traslada el elemento 10px hacia la derecha */
            • Rotate: gira o rota los elementos en grados: rotate(v).
            transform: rotate(45deg); /* Rota el elemento 45 grados */
            • Skew: distorsiona los elementos según el ángulo en grados. La función skew() se establece con uno o dos valores: skew(x) o skew(x,y).
            transform: skew(45deg); /* Distorsiona el elemento 45 grados en el eje x */
            • Matrix: mueve o transforma los elementos con precisión de píxel. La función matrix() se establece con seis valores numéricos: matrix(a,b,c,d,x,y). Los dos últimos valores representan la translación y los primeros la transformación lineal.
            transform: matrix(0.5, 0.1, 0.5, 1, 10, -2);

            La propiedad transform se usa junto con la propiedad transition vista en la sección anterior para que la transformación pueda tener una transición espaciada en el tiempo:

            .caja1{
               -webkit-transition: 1s linear;
               transition: 1s linear;
             }
             .caja1:hover{
               -webkit-transform: scale(.5);
               transform: scale(.5);
             }
            Recuerda utilizar la extensión que te facilita la tarea de crear los prefijos para navegadores.


            Ejemplo

            Crea un contenedor de 180 píxeles de ancho y de alto, incluye un texto en su interior y aplícale un color de fondo. Realiza las siguientes transformaciones cuando el usuario pase por encima del contenedor el puntero del ratón:

            • Modifica la escala del contenedor.
            • Modifica la rotación del contenedor.
            • Modifica la posición del elemento mediante “translate”.
            • Distorsiona el contenedor mediante “skew”.

            0

            Comprueba tu aprendizaje

            ¿Qué valor se puede utilizar para girar un elemento mediante la función rotate?

            ¡Bien! ¡Has fallado!

            Define una función "translate" que mueva 40 píxeles desde la izquierda y 80 píxeles desde arriba al elemento.

            ¡Bien! ¡Has fallado!

            ¿Qué valor se utiliza en la función skew?

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 8.

            Utiliza algún tipo de transformación en uno de los elementos de tu proyecto web.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results