WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Módulo Transform com CSS3

Publicidade

Modificando elementos utilizando o módulo Transform

Informaçã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:

Exemplo 1
Exemplo 2
Exemplo 3
Exemplo 4

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.

Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]