CSS3 Transform e Transition

Por / Front-End /

O CSS3 nos trouxe maior flexibilidade para customizar de forma avançada o visual e os diferentes estados de um elemento, permitindo diferentes tipos de transformações e transições. Nesse artigo, vamos conhecer as propriedades Transform e Transition do CSS3.

CSS3 Transform

A propriedade CSS3 Transform nos permite alterações lineares em elementos HTML, incluindo rotação, inclinações e alteração da escala.

Temos dois tipos de transformações no CSS3, a 2D e 3D. Nesse artigo, irei me ater de forma mais consistente as transformações 2D, mas teremos uma pincelada sobre transformações 3D também.

Existem duas propriedades principais nas transformações CSS 2D: transform, que define as alterações que serão feitas no elemento; transform-origin, que define a posição de origem do elemento, ou eixo de rotação.

transform-origin

Para todos os exemplos da propriedade Transform que veremos a seguir, usaremos o seguinte código HTML:

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

Transform – Scale

Com a propriedade scale podemos alterar o tamanho dos elementos, aumentando ou reduzindo proporcionalmente em relação ao tamanho original. Vamos a um exemplo:

li {
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background-color: #900;
   float: left;
   margin: 10px;
   list-style: none;
   font-weight: bold;
   color: #fff;
   cursor: pointer;

   -webkit-transform:scale(0.7);
      -moz-transform:scale(0.7);
   	-o-transform:scale(0.7);
   	   transform:scale(0.7);
}

li:hover {
   -webkit-transform:scale(1.2);
      -moz-transform:scale(1.2);
        -o-transform:scale(1.2);
       	   transform:scale(1.2);
}

No código acima, definimos para cada <li> um tamanho de 100x100px, e uma escala de 0.7 (equivalente a 70% do tamanho). Quando passamos o cursor do mouse sobre o <li> (li:hover), a escala do elemento aumenta para 1.2 (equivalente a 120% do tamanho). Veja o funcionamento do código nessa página de exemplo.

transform scale

Podemos ver um uso mais aprimorado dessa propriedade no site www.zurb.com/playground/osx-dock, onde temos o uso do scale para reproduzir o efeito do menu Dock.

transform scale

Transform – Rotate

Utilizando a propriedade rotate podemos girar elementos a partir de um ângulo fornecido e sob um eixo específico (transform-origin). Vamos a um exemplo:

li {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #900;
	float: left;
	margin: 10px;
	list-style: none;
	font-weight: bold;
	color: #fff;
	cursor: pointer;

	-webkit-transform:scale(0.7);
	   -moz-transform:scale(0.7);
	     -o-transform:scale(0.7);
		transform:scale(0.7);
}

li:hover {
	background-color: #600;
	-webkit-transform:scale(1.2) rotate(10deg);
	   -moz-transform:scale(1.2) rotate(10deg);
	     -o-transform:scale(1.2) rotate(10deg);
		transform:scale(1.2) rotate(10deg);
}

No código acima foi feito uma variação do exemplo anterior (scale). Agora, quando passamos o cursor do mouse sobre o <li> (li:hover), além de aumentar a escala do elemento, temos uma rotação de 10 graus no mesmo. Veja o funcionamento do código nessa página de exemplo.

transform rotate

Podemos ver essa propriedade em uso no site www.3site.eu/examples/gallery/, onde a imagem recebe efeitos de scale e rotate quando acontece o estado hover do mouse.

transform rotate

Transform – Translate

Com a propriedade translate podemos mover um elemento no seu eixo X e Y, sem afetar os outros elementos ao redor. Vamos a um exemplo:

li {
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background-color: #900;
   float: left;
   margin: 10px;
   list-style: none;
   font-weight: bold;
   color: #fff;
   cursor: pointer;

   -webkit-transform:scale(0.7);
      -moz-transform:scale(0.7);
        -o-transform:scale(0.7);
       	   transform:scale(0.7);
}

li:hover {
   background-color: #600;
   -webkit-transform:scale(1.2) rotate(10deg) translate(5px, 20px);
      -moz-transform:scale(1.2) rotate(10deg) translate(5px, 20px);
        -o-transform:scale(1.2) rotate(10deg) translate(5px, 20px);
       	   transform:scale(1.2) rotate(10deg) translate(5px, 20px);
}

No código acima foi feito uma variação do exemplo anterior (rotate). Agora, quando passamos o cursor do mouse sobre o <li> (li:hover), além de aumentar a escala e efetuar uma pequena rotação, temos deslocamento do elemento em 5px na horizontal e 20px na vertical. Veja o funcionamento do código nessa página de exemplo.

transform translate

Podemos ver essa propriedade em uso no site www.zurb.com/playground/sliding-vinyl, onde o efeitotranslate é aplicado aos discos de vinil quando acontece o estado hover do mouse.

Transform Translate

Transform – Skew

Ao aplicar a propriedade skew a um elemento, você poderá alterar os ângulos para conseguir um efeito de inclinação. Vamos a um exemplo:

li {
   width: 100px;
   height: 100px;
   line-height: 100px;
   text-align: center;
   background-color: #900;
   float: left;
   margin: 10px;
   list-style: none;
   font-weight: bold;
   color: #fff;
   cursor: pointer;

   -webkit-transform:scale(0.7);
      -moz-transform:scale(0.7);
        -o-transform:scale(0.7);
       	   transform:scale(0.7);
}

li:hover {
   background-color: #600;
   -webkit-transform:scale(1.2) translate(5px, 20px) skew(5deg, 15deg);
      -moz-transform:scale(1.2) translate(5px, 20px) skew(5deg, 15deg);
        -o-transform:scale(1.2) translate(5px, 20px) skew(5deg, 15deg);
       	   transform:scale(1.2) translate(5px, 20px) skew(5deg, 15deg);
}

No código acima foi feito uma variação do exemplo anterior (translate). Agora, quando passamos o cursor do mouse sobre o <li> (li:hover), além de aumentar a escala e efetuar um deslocamento, temos uma inclinação dos ângulos e 5 e 15 graus. Veja o funcionamento do código nessa página de exemplo.

transform skew

Podemos ver essa propriedade muito bem trabalhada no site www.paulrhayes.com/experiments/cube/multiCubes.html, onde o efeito skew foi aplicado a vários elementos para formar os cubos.

transform skew

CSS3 Transform 3D

Transformações 3D são semelhantes a transformações 2D. As propriedades básicas são translate3d,scale3d, rotateX, rotateY e rotateZ. translate3d e scale3d possuem três argumentos, para os eixos X, Y e Z. Vamos a um exemplo utilizando rotação:

3D
div {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	background-color: #900;
	margin: 50px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	-webkit-transition:all 2s ease-in-out;
	   -moz-transition:all 2s ease-in-out;
	     -o-transition:all 2s ease-in-out;
	        transition:all 2s ease-in-out;
    -webkit-perspective: 800px;
       -moz-perspective: 800px;
         -o-perspective: 800px;
            perspective: 800px;
    -webkit-perspective-origin: 50% 100px;
       -moz-perspective-origin: 50% 100px;
         -o-perspective-origin: 50% 100px;
            perspective-origin: 50% 100px;
}

div:hover {
    -webkit-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
       -moz-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
         -o-transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
            transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);
}

No exemplo acima, estamos utilizando rotação de 180 graus nos eixos X, Y e Z. Você pode ver o funcionamento desse código na página de exemplo. Podemos ver um exemplo mais incrementado no site www.paulrhayes.com/experiments/cube-3d/touch.html, que mostra o exemplo de um cubo que pode ser rotacionado através da interação do usuário.

CSS3 Transform 3D

CSS3 Transition

A propriedade transition nos permite fazer a transição entre diferentes estados de um elemento. A sintaxe da propriedade transition é a seguinte:

transition:  [ <transition-property> ||
               <transition-duration> ||
               <transition-timing-function> ||
               <transition-delay> ]

Dessa forma, indicamos [1] qual propriedade sofrerá a transição, [2] o tempo de duração da transição em segundos, [3] a forma de progressão da transição (os valores possíveis são linear, ease, ease-in,ease-out, ease-in-out e bezier-cubic) e [4] o tempo de atraso em segundos até o início da transição. Vamos a um exemplo prático:

Transition
div {
   width: 200px;
   height: 200px;
   line-height: 200px;
   text-align: center;
   margin: 100px;
   font-weight: bold;
   color: #fff;
   font-size: 20px;
   cursor: pointer;

   background: #51E500;
   -webkit-transition: all 1s ease-in 0.6s;
      -moz-transition: all 1s ease-in 0.6s;
        -o-transition: all 1s ease-in 0.6s;
           transition: all 1s ease-in 0.6s;
}

div:hover {
   background: #D35529;
   -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
           border-radius: 100px;
   -webkit-transform:scale(1.2) rotate(10deg);
      -moz-transform:scale(1.2) rotate(10deg);
	-o-transform:scale(1.2) rotate(10deg);
	   transform:scale(1.2) rotate(10deg);
}

No exemplo acima, o estado hover do cursor faz alterações na cor de fundo, bordas arredondadas, escala e rotação. Com a propriedade transition, ocorre a transição suave entre esses estados do elemento. Veja esse código em funcionamento nessa página de exemplo.

O valor all permite que a transição seja feita nas diferentes propriedades. Poderiamos fazer com que a transição acontecesse apenas em uma propriedade, como no exemplo abaixo:

transition: background 1s ease-in 0.6s;

No site 2011.newadventuresconf.com podemos ver um exemplo do uso da propriedade transition aplicado aos retângulos coloridos do layout.

transitions

Gostou das dicas? Então comente, deixe sua opinião ou sugestão 😉

Posts relacionados

3 comentários em “CSS3 Transform e Transition”

  1. Cleiton

    Excelente! Me ajudou muito. Suas explicações são boas!
    Só para complementar, utilizei uma estrutura de colunas, ex: column1, column2, e assim por diante… Ao invés de e (porque eles não são muito bons para design responsivo, até onde sei); portanto se você passa por algo parecido, fica a dica.

Comentários encerrados.

Rolar para cima