Css Transform

Efectos CSS con transform: rotate, scale, skew, translate.
APRENDERAPROGRAMAR.COM
EFECTOS CSS.
TRANSFORM: ROTATE,
SCALE, SKEW Y
TRANSLATE. ROTAR,
ESCALAR, SESGAR Y
TRASLADAR. EJEMPLOS.
(CU01062D)
Seccin: Cursos
Categora: Tutorial bsico del programador web: CSS desde cero
Fecha revisin: 2029
Resumen: Entrega n62 del Tutorial bsico: CSS desde cero.
Autor: Csar Krall

aprenderaprogramar.com, 2006-2029
Efectos CSS con transform

m: rotate, scale,, skew, translatte.
MS EFEC
CTOS CSS
La propiedad CSS tran
nsform perm
mite generar efectos grfiicos que antes no era po
osible generaar con CSS,
orizontal, esccalado verticcal, sesgado horizontal
como efecto de rotaccin, escalado completo, escalado ho
o vertical y traslacin horizontal o vertical de elementos.
e
AD TRANSFO
ORM
PROPIEDA
Esta prop
piedad puedee no ser recconocida porr los navegadores antigu
uos o requerir del uso de
d prefijos
especfico
os para algun
nos navegado
ores actuales.
PROPIEEDAD CSS traansform
Funcin de la propie
edad
Perm
mite rotar, escalar, sesgar o trasladar eleementos.
Valor po
or defecto
none
Aplicable a
Elem
mentos transfformables (tipo block o equ
uivalente).
none (indica que no hay transfformacin)
rotaate (udAng) (d
donde udAng es
e una unidad
d angular vlid
da en CSS)
scale (valorX) scale (valorX, valorY)
v
scaleX(valorX) sscaleY(valorY)) (donde la
espeecificacin X fuerza
f
el escaalado en horizontal y la esspecificacin Y lo fuerza
en vertical,
v
siendo ambas nm
meros enteros o decimales)
Valores posibles parra

esta pro
opiedad
skew
wX (udAng) skewY(udAnd) (donde udA
Ang es una unidad angularr vlida en
CSS. Se establecee un sesgado del
d elemento en horizontal o en vertical))
tran
nslate (valorX) transllate (valorX,, valorY) translateX(vvalorX)
tran
nslateY(valorYY) (donde la esspecificacin X fuerza la traaslacin en ho
orizontal y
la especificacin
e
Y lo fuerza en vertical, siendo ambaas unidades de
d medida
vlid
das admitind
dose porcentaajes)
inhe
erit (se heredaan las caracte
ersticas del elemento padree).
.myContainer { skkewX(-30deg);}
Ejemplos
aprende
eraprogramaar.com .myContainerSP { scale(0.5);}
e
muy vistosos cuaando se apro
ovecha para ccombinarla con
c hover,
Esta propiedad permiite generar efectos
ntBox1:hover { transform
m: skewX(-2
20deg);} da lugar a que el efecto se
e produzca
por ejemplo: #conten
cuando el
e usuario paase el ratn
n por encima del eleme
ento afectad
do, y mientrras esto no ocurre el
elemento
o se muestra como est definido
d
paraa una situacin normal. Este
E tipo de eefectos ante
eriormente
no se pod
dan generar con CSS y era necesario
o hacerlo me
ediante imgenes previam
mente prepaaradas con
un prograama de dise
o grfico, co
on Javascriptt u otras tcn
nicas.
aprenderraprogramar.co
om, 2006-2029
Escribe el siguiente cdigo HTML y comprueba los resultados de esta propiedad (ten en cuenta que es
posible que necesites aadir prefijos, depende del navegador que ests 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>

<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="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>

<h2 style="margin-top:80px;">CSS transform: scale</h2>
</div>
<div style="border-radius: 40px; margin-top: 50px; transform:
scale(0.5);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: skewX</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform:
skewX(-30deg);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: skewY</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform:
skewY(-20deg);">aprenderaprogramar.com<img
</div>

<h2>CSS transform: translate</h2>
</div>
<div style="border-radius: 40px; margin-left: 40px; transform: translate(70px, 70px);">aprenderaprogramar.com<img
</div>

<h2>CSS transform con hover</h2>
<div id="contentBox1" >aprenderaprogramar.com<img src="http://i.imgur.com/afC0L.jpg" ></a></div>
</div>
</body>
</html>
El resultado que se obtiene en un navegador que acepte estas propiedades ser similar a este:
EJERCICIO
Estudia el siguiente cdigo 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 cdigo aplicados a distintos
elementos.
b) Explica el significado de cada una de las partes del cdigo (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 cdigo y respuestas son correctas puedes consultar en los foros
aprenderaprogramar.com.
Prxima entrega: CU01063D

Acceso al curso completo en aprenderaprogramar.com -- > Cursos, o en la direccin siguiente:
http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=75&Itemid=203

Css Transform

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Css Transform

Enviado por

Direitos autorais:

Formatos disponíveis

Efectos CSS con transform: rotate, scale, skew, translate.

Autor: Csar Krall

Efectos CSS con transform

Valores posibles parra

Efectos CSS con transform: rotate, scale, skew, translate.

Efectos CSS con transform: rotate, scale, skew, translate.

Efectos CSS con transform: rotate, scale, skew, translate.

Efectos CSS con transform: rotate, scale, skew, translate.

Prxima entrega: CU01063D

Você também pode gostar