TransformaesNo 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

TransiesComo 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-durationA 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-delayPodemos estabelecer um atraso para o incio de uma transio com a propriedade transition-delay.

transition-timing-functionOs 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-propertyPodemos escolher quais propriedades CSS devem ser

consideradas nas transies atravs da propriedade

transition-property.Valor Descrio

AnimaesA 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.