Propiedades HTML y Css

ETIQUETAS Y PROPIEDADES HTML
UNIDADES DE MEDIDAS
PORCENTAJE:
Longitud referente a los tamaños de los elementos padre.
EM:
Unidad relativa al tamaño de fuente especificada más cercano.
REM:
Unidad relativa al tamaño de fuente especificada al ancestro más lejano (html o body).
VH/VW:
Unidad relativa porcentual con respecto al Viewport(ancho de pantalla). En donde VH es el alto y el VW es el ancho.
Ancla:
<a href=""></a>
En href colocamos la dirección URL a donde nos va a dirigir nuestra ancla
<a href="https://www.youtube.com/watch?v=BIS7cWGgJg0" target="_blank">Video Youtube</a>
Target=”_blank” lo usamos para que la dirección URL se abra en una pagina aparte.
CSS PROPIEDADES
Texto:
font-style: italic; (estilo de la fuente, en este caso sería cursiva )
text-transform: uppercase; (transforma el texto en mayúscula, minúscula etc.)
text-decoration: underline; (decora el texto con subrayado, tachado etc.)
font-weight: normal; (anchor de letra o volverla negrilla)
line-height: 1.5; (espacio entre lineas o renglones del texto)
line-height: 40px; (Se usa para centrar el elemento icono junto con text aling; ya que por ser un icono se toma como si fuera una fuente)
letter-spacing: -.2px; (espacio entre letras)
Listas:
ol, ul{
list-style: none;
}
list-style: none; ( en este caso quita los números o puntos de la lista )
Background:
background-repeat: no-repeat; (permite que la imagen no se repita en el fondo)

background-position-x: right; (modifica posición de la imagen en el eje x, también lo puede hacer en el eje Y)
background: rgba(5, 111, 255, .8); (las tres primeras cifras modifican el color y la ultima la opacidad)
Imágenes:
vertical-align: middle; (posiciona o centra una imagen con respecto al texto)

object-fit: cover; (ajusta la imagen al tamaño asignado sin redimensionarla. Corta la imagen para que se ajuste)
bordes:
border: tamaño, tipo, color; ejemplo: border: 12px solid red;
border-top: 10px solid red; (top=arriba bottom=abajo rigth o left)
También se puede ser más específico, EJEMPLO:
border-color: red;
border-style:solid; solo modifica el estilo de borde
border-width:15px;
y podemos ser aún más específicos, EJEMPLO:
border-top-color: green; (solo cambiamos el color del borde superior y se puede usar a cada propiedad)
border-radius da curva a las esquinas y se puede dar a todo el borde como a una esquina en especifico:
border-top-left-radius: 20px;
overflow: hidden; ( oculta todo lo que se salga del contenedor. Generalmente permite que el border-radius no se vea afectado por elementos
dentro del contenedor )
overflow: auto; (permite que se pueda visualizar todo el contenido. Por ejemplo si hay varias filas en una grid celda de pequeño tamaño,
permite poder hacer scroll en la celda
y poder ver todas las filas que esta contenga)
márgenes:
margin: 10px 20px; (el primer valor corresponde al top y bottom y el segundo al rigth y left)
margin: 10px 20px 30px 5px; (por defecto los valores empiezan a modificar el top, rigth, bottom y left)
box-sizing: border-box; (permite que el elemento no se modifique mas de lo que hemos declarado en alto y ancho. Indica al elemento que no se
salga de la caja)
Propiedades con flex:

flex-wrap: wrap; (modifica el flex para que no muestre elementos horizontalmente mas alla de la pantalla)
flex-shrink: 0; (indica que no modifique el tamaño del elemento cuando se posicionan uno al lado del otro; esta propiedad
se usa en el elemento hijo mas no en el contenedor o donde se usa inicialmente el flex)
flex-direction:column; (permite mostrar los elementos uno sobre otro de manera vertical)
AL CAMBIAR LA DIRECCION DEL FLEX CAMBIA LA ORIENTACION DEL EJE X & Y "SE INVIERTEN" LO QUE DEBEMOS TENER CUIDADO
SI USAMOS JUSTIFY-CONTENT Y ALING-ITEMS
flex: 1; (Indica al elemento que tome el 100% del ancho, en este caso 1000px)
Alineación elementos Horizontal o eje X:

justify-content:space-between; (esta propiedad permite ubicar el contenido de muchas maneras; en esta ocasion
da un espacio entre los contenidos llenando todo el espacio horizontal pero sin margen al inicio y al final.
Para tener un mismo espacio entre todos los contenidos usamos space-evenly;)
Alineacion elementos vertical o eje Y::::::

aling-items: center; (ubica o alinea el contenido con respecto al eje Y. En este caso centra todo el contenido con respecto al contenedor;
¡Ojo! esto no posiciona un elemento sobre otro de manera vertical, ya que para eso se usa flex-direction:column;
aling-self: flex-start (usa la misma logica, pero este solo se usa para un elemento o un solo hijo del contenedor)
CSS POSITIONS POSITION
static: Es la posición inicial o por defecto de los elementos, las propiedades left, top, right o bottom no surten efecto con este tipo de
posicionamiento.
los siguientes valores les afectan las propiedades left, top, right o bottom:
relative: se posiciona con respecto a su posición inicial.
absolute: se posiciona en relación al primer elemento padre con posicionamiento diferente de static o absolute. El elemento padre debe tener un
position:relative.
fixed: se posiciona en relación al viewport, es perfecto para ser un elemento flotante que sigue la pantalla del navegador. Se usa mucho para fijar
el menú en la parte superior.
sticky: se posiciona en su contenedor aparentando ser un elemento con posición static, pero interactúa con el scroll del cliente cuando se fija un
límite con las propiedades de left, top, right o bottom.
Z-index: Otorga jerarquía la cual indica cual elemento se va a sobreponer del otro.
Ejemplos: https://codepen.io/LeonidasEsteban/pen/VGWzWK
AGREGAR O QUITAR TEXTO CON CSS Y SEUDOELEMENTOS:
.countdown span:after{ (utilizamos el seudoelemento after para indicar que después de cada span agregue algo)
content: ":"; (el content es la propiedad obligatoria en la cual indicamos que queremos agregar algo, en este caso los dos
puntos)
display: inline-block;
margin: 5px;
}
Ahora para quitar algún elemento usamos lo siguiente; En este caso quitaremos el último elemento hijo del span:
.countdown span:last-child:after{ (aca tomamos el ultimo hijo del after)

display: none;
}
MEDIA QUERIES
Formar de llamar los media queries
1. Llamando un nuevo archive CSS desde Archivo html:
<link rel="stylesheet" href="css/media.css" media="screen and (max-width:768px)"/>
2. Dentro del archivo css general:

@media screen and (max-width: 768px) {
body {
border: 10px solid green; }
}
3. Usando el Tag Style en el archivo html:

<style>
@media screen and (max-width: 768px) {
body {
border: 10px solid green;
}
}
</style>
Mobile first
Desde medidas iniciales en la que van las pantallas.
@media screen and (min-width:320 px){}

Desktop first
Hasta medidas máximas que las pantallas pueden alcanzar, por como dice su nombre suelen ser medidas ´para ordenadores, o pantallas
grandes.
@media screen and (max-width:1024 px){}

@media screen and (max-width:320: px){}
Combinación de Medias Queries
@media screen and (max-width: 768px)
FUENTE DE ICONOS
En el siguiente Link podemos encontrar algunos iconos muy usados como el menu de hamburguesa:
https://icomoon.io/
Una vez seleccionemos nuestros iconos lo descargamos un archivo .ZIP:

Dentro del archivo .ZIP copiamos a nuestro proyecto la carpeta fonts. También copiamos a nuestro archivo de estilos CSS el código que se
encuentra en el .ZIP dentro del archivo style.css y modificamos la ruta de la carpeta fonts: src: url('../fonts/icomoon.eot?fynqta');
De esa manera ya podemos usar en el HTML la clase que nos indica el código. Ejemplo, solo lo resaltado con el color rojo:
.icon-menu:before {
content: "\e900";
}
SERVIDOR ESTATICO CON NODE

Debemos descargar el archivo del siguientes link:
https://nodejs.org/es/
Luego ingresamos a la consola en modo administrador CMD e instalamos el servidor estático con el siguiente comando:
Windows:
npm install –g static-server
Mac o Linux:
Sudo npm install –g static-server
Una vez instalado, podemos correr el servidor en CMD con el comando (static-server) dentro de la carpeta del proyecto.
Serving files at: http://localhost:9080
Cuando visualicemos el Puerto; en el ejemplo de arriba fue 9080, verificamos la IP que tiene nuestro equipo y con nuestro teléfono conectado a la
misma red, accedemos en el navegador de la siguiente manera:
Ejemplo: 192.168.1.18:9080
GRID LAYOUT
Trucos de CSS GRID:

https://css-tricks.com/snippets/css/complete-guide-grid/
Display:grid; (indica que vamos a trabajar ese elemento como grid.)
Truco
Para hacer todos los div que aparecen en la siguiente imagen, podemos usar una abreviación que nos genere y enumere
automáticamente todo a partir de un código:
.item{contenido #$}*12 y presionamos Enter.
<section class="container">
<div class="item">contenido #1</div>
</section>
Definir cantidad de columnas y tamaño:
grid-template-columns: 200px 200px 200px; Acá indicamos que queremos 3 columnas con 200px(cualquier medida) cada una.
Definir cantidad de filas y tamaño
grid-template-rows: 300px 150px; Definimos de la misma forma que en las columnas
O se puede declarar de una manera resumida en donde primero se asignan las filas y después las columnas separados con un “/”:
grid-template: 300px 100px 100px / 50% 200px 100px;
SUB_ITEM
Utilizamos una seudoclase para tomar el elemento ítem que le indiquemos:
.item:nth-of-type(4){
background: blue;
}
En este caso le decimos que al item # 4 de los 12 creados anteriormente le cambiemos al backgound. Y luego creamos los subitems en el
elemento al cual elegimos con la seudoclase:
<div class="item">
<div class="item">subitem #1</div>
</div>
</section>
display: subgrid; (Heredaría toda la configuración del grid padre…. Es una actualización en proceso el cual puede no estar disponible aun)
Espaciado entre columnas:
grid-column-gap: 30px; (permite espaciado entre columna como un margen)

grid-row-gap: 50px; (permite espaciado entre las filas de manera horizontal)
grid-gap: 10px 100px; (mezcla las propiedades de column y row asignándose primero el espaciado entre filas y luego
de columnas)
Unidades de medida y funciones para Grids:
FR: (Es una medida fraccionaria)

Auto: (distribuye el tamaño de las grid con respecto al contenido)
grid-template: 300px 100px 100px/repeat(4, 1fr); (Tenemos una function repeat la cual dice que nos haga 4 columnas todas a 1fr, la
cual serian iguales)
grid-template: 300px 100px 100px / repeat(4, minmax(200px, 1fr)); (el minmax define el minimo de tamañao que debe tener el grid seguido
del maximo. En este caso
usando el repeat decimos que el minmax sea aplicado a las 4
columnas)
AREAS CON GRIDS:
Primero debemos definir o identar como queremos que queden las áreas de nuestro grid para después ubicarlas por medio de
clases:
grid-template:100px 1fr 150px/200px 1fr;
grid-template-areas: "header header"
"left contenido" (si quisiéramos dejar un área en blanco solo ponemos un punto “.”)
"footer footer";
En grid-template definimos 3 filas y 2 columnas; es por eso que en áreas identamos las 3 filas y 2 columnas, según como queramos. Ahora
damos clases a nuestros elementos:
<div class="item header">header</div>
<div class="item left">left</div>
<div class="item contenido">contenido</div>
<div class="item footer">footer</div>
</section>
Y por ultimo definimos a que área corresponde cada elemento, llamándolo por su clase:
.header{
grid-area: header;
}
.left{
grid-area: left;
}
.contenido{
grid-area: contenido;
}
.footer{
grid-area: footer;
}
Definiendo el tamaño de las columnas(COLUMN) dentro de un grid:
Debemos usar la seudocalse para cada grid que queremos modificar el tamaño de columna:
.item:nth-of-type(1) {
grid-column-start:1; (indico al grid 1 desde que línea quiero que inicie como columna, sabiendo que las líneas se empiezan a contar
desde la izquierda)
grid-column-end:3; (indico al grid desde que línea quiero que termine como columna)
}
grid-column: 2/4; (mezcla el start y el end iniciando por el start)
}
grid-column: 2/ span 2; (el span indica cuantos espacios quiere tomar para iniciar o terminar la columna. En este caso seria para
terminar)
}
grid-column: 1/-1; (indica que la columna iniciaría desde la primera línea y ocuparía hasta el final)
}
Definiendo el tamaño de las filas(ROW) dentro de un grid:
grid-column: 1/span 3;
grid-row: 1/span 2; (Se usan las mismas propiedades para filas que con columnas)
}
Nombrando líneas dentro de los GRIDS:
Debemos nombrar las lineas al momento de crearlas, para cuando vayamos a definir el tamaño de las columnas o filas lo hagamos con sus
nombres:
.container{
display: grid;
grid-template-columns:[inicio]1fr [linea2] 1fr [linea3]1fr [destacado1-end]1fr [linea5]1fr [destacado2-end]1fr [linea7]1fr [final];
grid-template-rows:[inicio]200px [linea2]200px [final];
}
Debemos recordar que dentro de los corchetes no se puede dejar espacio. Una vez teniendo nombradas las líneas desde inicio hasta el final,
procedemos a darle tamaños a las filas o columnas; ejemplo:
grid-column:inicio/destacado1-end;
grid-grow:inicio/final
}
GRID implícito o sobrantes:
grid-auto-flow: row; (Acá indicamos que los grids implícitos se manejen como filas)
grid-auto-flow: column; (Acá indicamos que los grids implícitos se manejen como columnas)
grid-auto-columns: 50px 100px 50px 100px; (Acá indicamos que los grids implícitos tengan el tamaño deseado en columnas)
grid-auto-rows: 50px 100px 50px 100px; (Acá indicamos que los grids implícitos tengan el tamaño deseado en filas)
Alineación de items:
Para ir alineando los contenidos necesitamos usar las propiedades muy parecidas a las que usábamos con flex-box.
justify-items: center; (los valores que podemos usar son: start, end,center o stretch(este estira el cuadro))
align-items: center; (los valores que podemos usar son los mismos que justify-items
Luego si queremos que algún ítem se mueva y quede alineado de una manera diferente, debemos usar las siguientes propiedades con la
seudoclase:
align-self: start; (con el Self indicamos que se mueva solo ese item)
justify-self: start;
}
Con los siguientes estilos tendríamos el siguiente resultado

Alineación de contenido:
Para modificar las alineaciones usamos lo siguiente:
justify-content:; / aling-content:; (para justify como para aling se puede usar los siguientes valores: star,t end, stretch, space-between, space-
around, space-evenly.)
Grids responsive:
.container{
grid-template-columns: repeat(auto-fill, 250px); (al usar el auto-fill indicamos que las grillas se posicionen automáticamente al ancho
de la pantalla desplazando una
} debajo de la otra al reducir el screen)
ANIMACIONES PARA LA WEB
TRANSICIONES:
transition-property: width, height; (indica la propiedad que va a cambiar, en este caso seria el ancho y alto)
transition-duration: 1s; (indica la duración de la transición)
transition-delay: 1s; (indica el tiempo de espera para que empiece la transición)
transition-timing-function: ease; (indica que tan suave será la transición)
transition: width 1s 1s ease; (Con esta propiedad podemos definer el property, la duracion, el delay y el timing-function y podemos
dejar también solo los valores
a cambiar.
Ejemplo:
Otro Ejemplo de Transición:

<style>
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.pelota{
width: 100px;
height: 100px;
border-radius: 50%;
transition: 1s;
position: relative;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.pelota.a{
background: red;
left: 0;
}
.pelota.b{
background: blue;
right: 0;
}
.canasta{
border: 1px solid red;
position: relative;
height: 100px;
width: 100%;
}
.canasta:hover .pelota.a{
left: calc(50% - 100px); (“calc” indicamos que la pelota.a vaya hacia la derecha en un 50% y reste
} su ancho de 100px para que no se cruce con la pelota.b)
.canasta:hover .pelota.b{
right: calc(50% - 100px);
}
</style>
</head>
<body>
<div class="canasta">
<div class="pelota a"> Hola</div>
<div class="pelota b"> Mundo!</div>
</div>
</body>
</html>
TRANSFORMACIONES:
Algunas de las cosas que podemos lograr en un elemento con transform son:
Rotar un elemento (rotate).

Sesgar un elemento (kew).
Cambiar la posición de un elemento (translate).
Cambiar el tamaño de un elemento (scale).
transform: rotate(5deg) skew(10deg) translate(100px) scale(1.5); (scale se de en porcentaje, donde 1 es el 100% del tamaño original. En
este caso decimos al elemento que
aumente al 150%)
Rotaciones:
transform: rotate(-45deg); (al ser negativo, rota el elemento hacia la otra dirección)
transform: rotateX(360deg); (decimos al elemento que solo rote en su eje X)
transform: rotateY(360deg); (decimos al elemento que solo rote en su eje Y)
transform: rotateZ(360deg); (decimos al elemento que solo rote en su eje Z. O este sería el usado por defecto si no le ponemos un eje.)
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); (decimos al elemento que rote o gire en todos sus ejes)
Otra forma de aplicarlos de la misma manera seria:
transform: rotate3d(x, y, z, deg); (Si queremos modificar algun eje, colocamos “1” y no queremos modificarlo colocamos “0”)
transform: rotate3d(1, 1, 1, 90deg); (Aca decimos que queremos rotar 90 grados todos los ejes)
Translate:
Para TRASLADAR o modificar la posición de un elemento podemos utilizar diferentes valores los siguientes valores, los cuales, llevan dentro de
paréntesis la medida positiva o negativa que se aplicara:
.selector {
transform: traslate(100px, 200px); [mueve el elemento a lo largo de su eje X & Y.]
}
SINTAXIS:
traslate(x, y) - mueve el elemento a lo largo de su eje X & Y.
transform: traslate(100px, 200px);
traslateX() - mueve el elemento únicamente a lo largo de su eje X.
transform: traslateX(100px);
traslateY() - mueve el elemento únicamente a lo largo de su eje Y.
transform: traslateY(200px);
** traslateZ()**- mueve el elemento en su profundidad (3D), el cual se acerca por defecto. Requiere que se defina la propiedad ‘perspective’ en el
elemento padre de referencia.
Nota: La propiedad perspective puede cambiar su punto eje de referencia, a través del atributo.
traslate3d() - mueve el elemento de manera totalmente 3D uniéndo los 3 valores anteriores. Define cada una de sus medidas separadas por
coma (x, y, z).
transform: traslate3d(100px, 200px, 400px);
Escale:
Transformaciones de escala:
Para ESCALAR un elemento utilizamos el valor scale(x, y), y dentro de sus paréntesis definimos la medida o medidas en porcentaje para sus ejes
por separados que sera escalado el elemento. Dichos valores se definen mediante un numero en el que 0 es 0%, 1 es 100% o tamaño normal y
así en adelante.
transform: scale(2); = transform: scale(2, 2);
.selector {
transform: scale(2);
}
Sesgado:
Para SESGAR O INCLINAR un elemento utilizamos el valor skew(x, y), y dentro de sus paréntesis definimos la medida en grados positivos o
negativos que se aplicaran para los ejes X & Y.
.selector {
transform: skew(45deg, 45deg);
}
PUNTO DE TRASNFORMACION:
La transform-originpropiedad le permite cambiar la posición de los elementos transformados.
Las transformaciones 2D pueden cambiar los ejes x & y de un elemento. Las transformaciones 3D también pueden cambiar el eje z de un
elemento.
Ejemplos:
transform-origin: x y;
transform-origin: 50% 50%; Esta es la config inicial
transform-origin: top;
transform-origin: bottom;
transform-origin: left; (Hay que tener en cuenta el eje de transformación al cambiar el origen)
transform-origin: 0% 50%;
transform-origin: right;
transform-origin: 100% 50%;
transform-origin: top left; (Al usar dos puntos de origen debemos usar el eje Z)
transform-origin: top right;
transform-origin: bottom left;
Página de animaciones explicadas:
https://diazpolanco13.github.io/mis-guias/guia-animation.html
Animation:
Sintaxis:
Los valores que podemos utilizar para trabajar con un @keyframes (animación) son:
animation-name (obligatorio) Hace referencia al nombre del @keyframes que deseamos utilizar.
animation-name: mi-animacion;
Nota: Es posible ejercer multiples animaciones añadiendo otro nombre a la propiedad animation-name. animation-name: mi-animacion, mi-otraAnimacion;
animation-duration: (obligatorio) Define el tiempo que durara el @keyframes y podemos utilizar un valor en segundos (s) o milisegundos (ms).
animation-duration: 2s;
animation-delay Define el tiempo de retardo al comienzo de la animación y podemos utilizar un valor en segundos (s) o milisegundos (ms). El valor por defecto es 0.
animation-delay: 1s;
animation-iteration-count: Define la cantidad de veces que se repetirá el @keyframes, podemos utilizar infinite para que sea infinito. El valor por defecto es 1.
animation-iteration-count: 5;
animation-direction: Define la dirección de la animación ya sea normal, es decir, del 0 al 100%, al revés (reverse) o alternativa (alternate). El valor por defecto es normal.
animation-direction: alternate;
animation-fill-mode: Define las propiedades que mantendrá el objeto una vez que haya terminado la animación, ya sea la inicial (backwards), la final (forwards) o ambas(both). El
valor por defecto es backwards.
animation-fill-mode: forwards;
animation-play-state:Define el estado de la animación, es decir, si se esta reproduciendo (running) o si esta en pausa (paused).
animation-play-state: running;
animation-timing-function: Define el tipo de aceleración que tendrá la animación. El valor por defecto es ease.
ease: Define la aceleración rápida al inicio y muy leve al final (valor por defecto)
ease-in: Define la aceleración leve al inicio y rápida al final
ease-out: Define la aceleración rápida al inicio y leve al final
ease-in-out: define la aceleración leve al inicio y leve al final
linear: Define un efecto sin aceleración, es decir, constante durante todo el trazo
steps(0): Define la aceleración en frames, que son los pasos que dará el selector para completarla.
cubic-bezier (0, 0, 0, 0): Define una aceleración personalizada mediante una configuración avanzada, la cual, consta de 4 valores de -1 a 1.
https://cubic-bezier.com/#.17,.67,.73,.91

Propiedades HTML y Css

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Propiedades HTML y Css

Cargado por

Copyright:

Formatos disponibles

ETIQUETAS Y PROPIEDADES HTML

background-repeat: no-repeat; (permite que la imagen no se repita en el fondo)

vertical-align: middle; (posiciona o centra una imagen con respecto al texto)

Propiedades con flex:

Alineación elementos Horizontal o eje X:

Alineacion elementos vertical o eje Y::::::

CSS POSITIONS POSITION

relative: se posiciona con respecto a su posición inicial.

AGREGAR O QUITAR TEXTO CON CSS Y SEUDOELEMENTOS:

.countdown span:last-child:after{ (aca tomamos el ultimo hijo del after)

2. Dentro del archivo css general:

3. Usando el Tag Style en el archivo html:

@media screen and (min-width:320 px){}

@media screen and (max-width:1024 px){}

@media screen and (max-width: 768px)

Una vez seleccionemos nuestros iconos lo descargamos un archivo .ZIP:

SERVIDOR ESTATICO CON NODE

Serving files at: http://localhost:9080

Trucos de CSS GRID:

Display:grid; (indica que vamos a trabajar ese elemento como grid.)

.item{contenido #$}*12 y presionamos Enter.

Definir cantidad de columnas y tamaño:

Definir cantidad de filas y tamaño

grid-template-rows: 300px 150px; Definimos de la misma forma que en las columnas

grid-template: 300px 100px 100px / 50% 200px 100px;

Utilizamos una seudoclase para tomar el elemento ítem que le indiquemos:

Espaciado entre columnas:

grid-column-gap: 30px; (permite espaciado entre columna como un margen)

Unidades de medida y funciones para Grids:

FR: (Es una medida fraccionaria)

AREAS CON GRIDS:

Definiendo el tamaño de las columnas(COLUMN) dentro de un grid:

Definiendo el tamaño de las filas(ROW) dentro de un grid:

Nombrando líneas dentro de los GRIDS:

GRID implícito o sobrantes:

Con los siguientes estilos tendríamos el siguiente resultado

Para modificar las alineaciones usamos lo siguiente:

ANIMACIONES PARA LA WEB

Otro Ejemplo de Transición:

Rotar un elemento (rotate).

Otra forma de aplicarlos de la misma manera seria:

transform: scale(2); = transform: scale(2, 2);

Página de animaciones explicadas:

También podría gustarte