Transformaes

No CSS3 foram introduzidas algumas funes para realizar as transformaes de translado,

escalonamento, distoro e rotao nos elementos de uma pgina HTML. Essas funes so
utilizadas em conjunto com a propriedade transform do CSS3.

translate()
O resultado da aplicao da
funo translate(m, n)
semelhante ao resultado
obtido
ao
mover
um
elemento atravs do atributo
position
com
o
valor
relative. Ao utilizar a funo
translate(m, n) um elemento
transladado a m unidades
de medida da esquerda e n
unidades de medida do topo.

scale()
A funo scale(m, n) escalonar as dimenses de um
elemento. O escalonamento ser aplicado sobre a largura
a uma taxa definida por m e sobre a altura a uma taxa
definida por n. Caso a funo seja chamada com apenas
um parmetro, a mesma taxa ser aplicada na altura e
largura do elemento.

rotate()
A funo rotate(m) rotacionar um elemento em torno do
seu ponto de origem. O valor de m deve ser dado em
graus, voltas ou grado.

skew()
A funo skew(m, n) distorcer um elemento em relao
aos eixos x e y. m e n definem as distores aplicadas
nos eixos x e y respectivamente. Os valores de m e n
devem ser dados em graus, voltas ou grado.

Atividade

Transies
Como vimos anteriormente, as regras CSS podem ser aplicadas aos elementos HTML de
acordo com o estado atual do mesmo. Por exemplo, considere as duas regras CSS a seguir.
div {
width : 50 px;
height : 50 px;
}
div : hover {
width : 100 px;
height : 100 px;
}

De acordo com as duas regras CSS acima, quando o ponteiro do mouse for colocado por
cima de um div, a largura e a altura desse elemento HTML aumentar instantaneamente de
50px para 100px.

Atividade

Quando a mudana visual de um elemento HTML muito significativa, o resultado pode no ser agradvel
aos usurio. A linguagem CSS possui propriedades para melhorar essas transies.

transition-duration
A durao das transies pode ser controlada coma propriedade transition-duration. Os navegadores
devem gerar, automaticamente, frames intermedirios entre visual inicial e o final. Esses frames devem ser
exibidos sequencialmente durante o tempo determinado com a propriedade transition-duration.

transition-delay
Podemos estabelecer um atraso para o incio de uma transio com a propriedade transition-delay.

transition-timing-function
Os frames que foram uma transio podem ser exibidos com padres diferentes. Por exemplo,
uma transio pode iniciar devagar, no meio acelerar e terminar devagar. O padro desejado pode
ser determinado atravs da propriedade transition-timing-function.

transition-property
Podemos escolher quais propriedades CSS devem ser
consideradas nas transies atravs da propriedade
transition-property.
Valor Descrio

Animaes
A partir da sua terceira verso, a linguagem CSS adicionou algumas propriedades para criao de
animaes. Essas animaes so criadas atravs do conceito de keyframes. Nessa abordagem,
devemos definir os quadros principais e os navegadores completam a animao inserindo os quadros
intermerdirios. Os quadros principais so definidos com a propriedade keyframes. A forma mais
simples de utilizao dessa propriedade definir o primeiro e o ltimo quadro da animao.

Os quadros principais so definidos de acordo

como momento no qual eles sero exibidos.
Esse instante descrito como uma porcentagem
do tempo total da animao.

Depois de definir as animaes com a propriedade keyframes, devemos associ-la aos

elementos HTML atravs da propriedade animation-name e determinar o tempo de durao
com a propriedade animation-duration.

O arquivo CSS e as figuras esto no Moodle.