Resumen: Entrega nº62 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01062D

 

 

MÁS EFECTOS CSS

La propiedad CSS transform permite generar efectos gráficos que antes no era posible generar con CSS, como efecto de rotación, escalado completo, escalado horizontal, escalado vertical, sesgado horizontal o vertical y traslación horizontal o vertical de elementos.

css

 

PROPIEDAD TRANSFORM

Esta propiedad puede no ser reconocida por los navegadores antiguos o requerir del uso de prefijos específicos para algunos navegadores actuales.

PROPIEDAD CSS transform
Función de la propiedad Permite rotar, escalar, sesgar o trasladar elementos.
Valor por defecto none
Aplicable a Elementos transformables (tipo block o equivalente).
Valores posibles para esta propiedad none (indica que no hay transformación)
rotate (udAng) (donde udAng es una unidad angular válida en CSS)
scale (valorX) ó scale (valorX, valorY) ó scaleX(valorX) ó scaleY(valorY) (donde la especificación X fuerza el escalado en horizontal y la especificación Y lo fuerza en vertical, siendo ambas números enteros o decimales)
skewX (udAng) ó skewY(udAnd) (donde udAng es una unidad angular válida en CSS. Se establece un sesgado del elemento en horizontal o en vertical)
translate (valorX) ó translate (valorX, valorY) ó translateX(valorX) ó translateY(valorY) (donde la especificación X fuerza la traslación en horizontal y la especificación Y lo fuerza en vertical, siendo ambas unidades de medida válidas admitiéndose porcentajes)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myContainer { transform: skewX(-30deg);}
.myContainerSP { transform: scale(0.5);}

 

 

Esta propiedad permite generar efectos muy vistosos cuando se aprovecha para combinarla con hover, por ejemplo: #contentBox1:hover { transform:  skewX(-20deg);} da lugar a que el efecto se produzca cuando el usuario pase el ratón por encima del elemento afectado, y mientras esto no ocurre el elemento se muestra como esté definido para una situación normal. Este tipo de efectos anteriormente no se podían generar con CSS y era necesario hacerlo mediante imágenes previamente preparadas con un programa de diseño gráfico, con Javascript u otras técnicas.

Escribe el siguiente código HTML y comprueba los resultados de esta propiedad (ten en cuenta que es posible que necesites añadir prefijos, depende del navegador que estés usando):

<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{margin:0; padding:0; font-family: sans-serif;}
div{ border: 5px solid; width: 260px; margin:10px; background-color:yellow; font-size: 20px; text-align:center;
padding-top: 20px; word-wrap:break-word; }
h2{margin: 15px 0 -15px 40px;} img {padding:10px; }
#contentBox1 {border-radius: 40px; margin-left:40px;}
#contentBox1:hover { transform:  skewX(-20deg);}
}
</style> </head>
<body>
<!--ROTATE-->
<h2>CSS transform: rotate</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px; margin-top: 50px; transform:  rotate(45deg);">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--SCALE-->
<h2 style="margin-top:80px;">CSS transform: scale</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px; margin-top: 50px; transform:  scale(0.5);">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--SKEWX-->
<h2>CSS transform: skewX</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px; margin-left: 40px; transform:  skewX(-30deg);">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--SKEWY-->
<h2>CSS transform: skewY</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px; margin-left: 40px; transform:  skewY(-20deg);">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--TRANSLATE-->
<h2>CSS transform: translate</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px;">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div style="border-radius: 40px; margin-left: 40px; transform:  translate(70px, 70px);">aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
<!--COMBINADO CON HOVER-->
<h2>CSS transform con hover</h2>
<div style="float:left; border-style:none; border-width:0; background-color:white;">
<div id="contentBox1" >aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
<p style="clear: both; "></p>
</body>
</html>

 


El resultado que se obtiene en un navegador que acepte estas propiedades será similar a este:


css transform rotate
 
css transform scale
 
css transform skewX
 
css transform skewY
 
css transform translate

 

 

EJERCICIO

Estudia el siguiente código CSS y responde a las cuestiones planteadas:

#skew {   transform:skew(35deg); }

#scale {  transform:scale(1,0.5); }

#rotate {   transform:rotate(45deg); }

#translate {   transform:translate(10px, 20px); }

#rotate-skew-scale-translate {   transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }

 

 

a) Crea un documento HTML donde se vean los estilos que tenemos en el código aplicados a distintos elementos.

b) Explica el significado de cada una de las partes del código (por ejemplo #skew indica el estilo que se aplicará a los elementos con atributo id=”skew”. Transform:skew(35deg) indica que …)

 

Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

 

Descargar archivo: