CloudWare

cafelog-coffee

A Propriedade Transform

Quinta, 18 Agosto 2011

Conheça essa incrível propriedade cheia de recursos!

css3

Prontos para transformar completamente seu site? Conheca a propriedade transform que trás consigo: scale, skew, translate e rotate!

SCALE

O scale nos permite redimensionar os elementos. Veja o exemplo com escala de 0.5 e em sua escala real:

#exemplo_scale1 {
background-color: #3489C8;
 width: 250px;
 height: 250px;
}
#exemplo_scale2 {
background-color: #3489C8;
 width: 250px;
 height: 250px;
 transform: scale(0.5, 0.5);
 -moz-transform: scale(0.5, 0.5);
 -webkit-transform: scale(0.5, 0.5);
}

 
 

SKEW

O skew nos permite distorcer o elemento, dessa forma:

#exemplo_skew {
background-color: #3489C8;
transform: skew(30deg, -15deg);
-moz-transform: skew(30deg, -15deg);
-webkit-transform: skew(30deg, -15deg);
}

 

TRANSLATE

Conhece as propriedades float, position e margin? Bem, o translate é mais uma alternativa. Assim como as propriedades citadas, o translate nos permite mover determinado elemento nos eixos X e Y. Confira o exemplo:

#exemplo_translation {
 background-color: #3489C8;
 transform: translate(-250px, 10px);
 -moz-transform: translate(-250px, 10px);
 -webkit-transform: translate(-250px, 10px);
 }

 

ROTATE

A propriedade rotate permite facilmente rotacionar objetos e textos. Observe o código abaixo e seu resultado:

#exemplo_rotate {
 background-color: #3489C8;
 transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -webkit-transform: rotate(15deg);
}

 

Android

Java

Hibernate

Joomla!

CSS3

HTML5

Saia na Frente

html5 css3

Sobre Mim

sobre-foto-2Adriel Café é Web Master e Desenvolvedor Java. Ele incentiva o uso/estudo de Web Standards, Java e Android.

Saiba Mais

Encontre-me

facebook linkedin