• Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación
 
 
Curso 2020/2021 | 2º BACHILLERATO

 Tecnologías de la Información y la Comunicación | TIC-II 

icon html5
icon css3
icon css3


Artículos

#02 - Transformaciones 2D

La propiedad CSS transform te permite modificar el espacio de coordenadas del modelo de formato visual CSS. Usándola, los elementos pueden ser trasladados, rotados, escalados o sesgados de acuerdo a los valores establecidos.

Esta tarea consiste en crear galerías de imágenes y aplicar distintas transformaciones 2D utilizando la propiedad css transform con sus dintintos valores.

Objetivos

  • Estudiar y utilizar la propiedad transform.
  • Crear una galería de imágenes con los valores: rotate(), translateX(), translateY(), scale(), skew().
  • Utilizar la pseudoclase :hover para obtener el resultado.
  • Utilizar los pseudoelementos :before y/o :after para crear distintos efectos.
  • Teoría y Ejemplos: Movimientos

Utilizando como base la "template" base1_tareas y algunas imágenes libres o simuladas,
realiza los siguientes ejercicios:


Ejercicio 1

Ejercicio 1

Crea una página semejante a esta, con 4 imágenes y aplicando los 4 movimientos estudiados.

Ejercicio 2

Ejercicio 2

Crea una página semejante a esta, con 9 tipos de transformaciones.


Coloca dentro de las etiquetas de cabecera head la siguiente etiqueta:

<meta name="author" content="(cc) tuNombre" />

Comprime, con 7zip, toda la carpeta de tu proyecto (tarea) y guárdala en tu tarjeta de memoria y en una nube (Drive o onDrive) con el nombre t15_transformaciones2d.7z. Más tarde la enviarás al Aula Virtual y al VPS (Servidor Privado Virtual).

 

Etiquetas: 2ª Evaluación, CSS

  • Anterior
  • Siguiente

Teoría

Guías completas

Guías completas

  • LibrosWeb HTML
  • Vocabulario HTML
  • Guía HTML5 y HTML
  • Guía CSS 2.1 y CSS3
  • Guía JavaScript
  • HTML Reference
  • CSS Reference
Cheat Sheets

Cheat Sheets

html css js

  • HTML CheatSheet
  • CSS CheatSheet
  • JS CheatSheet

Herramientas

Para Código

Para Código

  • Sublime-Text | Ext.
  • Visual Studio Code | Ext ≡
  • Preprocesador: Prepros
  • Editor online: CodePen
Otras ...

Otras ...

  • Cliente - FTP: Filezilla
  • Capturador: PicPick
  • Visor: Sumatra-PDF
  • Acrobat Reader - PDF
  • Compresor: 7zip
  • Reproductor: VLC
  • MathJax - AsciiMath
Portables

Portables

  • Visual Studio Code [Ext]
  • Sublime Text
  • Sumatra PDF
  • Chrome Portable
  • Opera Portable
  • FireFox Portable
Código BASE

Código BASE

  • Template: base1_tareas
  • Template: base2_layout
  • Template: base3_menu
  • Imágenes: HDWallpapers
Hosting

Hosting

  • DriveToWeb [•]
  • Ejemplo

(cc) 3con14, esta obra está bajo licencia
Creative Commons Atribución-No Comercial-Compartir Igual 4.0

  • Inicio
    • Recursos
  • Marcado HTML
  • Estilos CSS
  • JavaScript
  • Publicación
  • Prácticas
    • 1ª Evaluación
    • 2ª Evaluación
    • 3ª Evaluación