Autor Tema: HTML y CSS con Notepad++ Rotar, escalar, sesgar, trasladar transform. CU01062D  (Leído 1591 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Buenas! Mi ejercicio CU01062D del manual de programación web con CSS y editor Notepad++

Modifiqué algunos valores para hacer mas prolijo el ejercicio.

HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS-Ejfinal(62).css">
</head>

<body>

        <h2> Imagen Original </h2>
        <div>
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Skew </h2>
        <div id="skew">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
       
        <h2> Imagen Scale </h2>
        <div id="scale">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen Rotate </h2>
        <div id="rotate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
      <h2> Imagen Translate </h2>
        <div id="translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>
   
        <h2> Imagen con varios efectos </h2>
        <div id="rotate-skew-scale-translate">
            <img src="http://elsitiodeale.byethost7.com/BOCA.jpg">
        </div>

</body>

</html>


CSS:

Código: [Seleccionar]



#skew {transform:skew(35deg);}
/*#skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg); indica un sesgado del elemento de 35 grados sobre el eje x ya que no se menciona un segundo valor que corresponderia al eje y.*/

#scale {transform:scale(1,0.5);}
/*#scale indica el estilo que se aplicará a los elementos con atributo id=”scale”. transform:scale(1,0.5); indica un scalado del elemento de 1 sobre X (horizontal) y 0.5 sobre Y (vertical).*/

#rotate {transform:rotate(2deg);}
/*#rotate indica el estilo que se aplicará a los elementos con atributo id=”rotate”. transform:rotate(2deg); indica una rotación del elemento a 2grados.*/

#translate {transform:translate(20px, 10px);}
/*#translate indica el estilo que se aplicará a los elementos con atributo id=”translate”.
transform:translate(20px, 10px) indica una traslación de 20px (primer valor sobre eje x) y 10px sobre el eje y*/

#rotate-skew-scale-translate {transform:skew(20deg) scale(1.1,1.1) rotate(-20deg) translate(10px, 20px);}
/*#rotate-skew-scale-translate indica el estilo que se aplicará a los elementos con atributo id=”rotate-skew-scale-translate”.
transform:skew(20deg):Indica un sesgado de 20 grados sobre el eje x.
scale(1.1,1.1): Indica un escalado de 1.1 sobre el eje x (horizontal) y 1.1 sobre el eje y (vertical).
rotate(-20deg): Define una rotacion de -20 grados del elemento.
translate(10px, 20px): Indica una traslacion de 10px sobre el eje x y 20 px sobre el eje y.*/

« Última modificación: 18 de Junio 2017, 12:36 por Alex Rodríguez »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:CSS-Ejercicio Final (CU01062D): Rotar, escalar, sesgar, trasladar.
« Respuesta #1 en: 03 de Mayo 2017, 22:55 »
Hola alefaletti.

Todo bien.

Saludos.  ;D

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".