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.
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.
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 – 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.
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 – 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.
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 – 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.
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.
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 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.
Gostou das dicas? Então comente, deixe sua opinião ou sugestão 😉
