Módulo Transform com CSS3
CSS - Utilizando módulo Transform com CSS3Informação:
O módulo Transform permite que elementos renderizados em css sejam transformados em 2D ou 3D através de comandos específicos.
Neste artigos daremos alguns exemplos de utilização do módulo Transform no plano 2D.
Obs: Vale lembrar que essa função CSS funciona apenas nos navegadores Google Chrome 10, Mozila Firefox 4 e Safari 5. Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos.
Lista com prefixo de cada navegador
Google Chrome e Safari: -webkit-
Mozilla Firefox: -moz-
Opera: -o-
Vejamos alguns exemplos:
<style>
.exemplo1{
width:150px;
height:150px;
Background:#fff;
transform: rotate(7deg);
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
}
</style>
Onde:
O módulo Transform se baseia em diferentes propriedades para indicar quais serão aos efeitos a serem aplicados:
- Rotate: Totaciona o elemento levando em consideração o ângulo indicado;
- Scale: Modifica as dimensões do objeto proporcionalmente, levando em consideração seu tamanho original;
- Translation: Move os elementos no eixo X e Y, independente de características como float, position, margin, etc.
- Skew: Modifica os ângulos do objeto, inclinando e destorcendo.
Abaixo alguns exemplos de utilização
<style>
.exemplo1{
width:130px;
height:130px;
Background:#fff;
margin:0 20px 0 0;
}
.exemplo1:hover{
transform: rotate(25deg);
-moz-transform: rotate(25deg);
-webkit-transform: rotate(25deg);
}
.exemplo2{
width:130px;
height:130px;
Background:#fff;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
transform:scale(0.8);
}
.exemplo2:hover {
-webkit-transform:scale(1.3);
-moz-transform:scale(1.3);
transform:scale(1.3);
}
.exemplo3{
width:130px;
height:130px;
Background:#fff;
margin:0 20px 0 0;
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
transform:scale(0.9);
}
.exemplo3:hover{
-webkit-transform:scale(1.2) skew(30deg);
-moz-transform:scale(1.2) skew(30deg);
transform:scale(1.2) skew(30deg);
}
.exemplo4{
width:130px;
height:130px;
Background:#fff;
margin:0 20px 0 0;
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
transform:scale(0.7);
}
.exemplo4:hover{
-webkit-transform:scale(1.1) translate(20px, 20px);
-webkit-transform:scale(1.1) translate(20px, 20px);
-webkit-transform:scale(1.1) translate(20px, 20px);
}
</style>
Veja o Resultado:Normalmente essas características são utilizadas em conjunto com o módulo Transition, permitindo criar uma maior variedade de animações e efeitos. Acesse aqui para alguns exemplos dessa interação entre esses dois módulos.
Criação e Diagramação
