

Seu próximo nível começa aqui
Seu desenvolvimento não pode ter limites. Garanta sua Assinatura Ilimitada e libere uma preparação completa com os melhores professores do Brasil.
É possível transformar a imagem com efeitos de escala, rotação, translação e distorção angular (skew). O código abaixo exemplifica isto: img {
-webkit-transform: scale(1.5) skew(30deg); /
-moz-transform: scale(1.5) skew(30deg); /
-o-transform: scale(1.5) skew(30deg); /
}
Existe a possibilidade de inclusão de imagens, mas sem alterações que deformem a imagem. O exemplo abaixo demonstra somente as operações possíveis: img {
-webkit-transform: scale(1.5) translate(1.5) /
-moz-transform: scale(1.5) translate (1.5) /
-o-transform: scale(1.5) translate (1.5) /
}
As alterações na imagem dependem sempre da definição de uma origem, não há como ativar estas operações sem antes definir o ponto de referência, que é feito da seguinte forma: img {
transform-origin: X10px Y10px; }
Repare que não há necessidade de indicar qual o motor de layout.
As alterações na imagem são em relação a uma origem ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora: img {
-webkit-transform-origin: X10px Y10px Z10px; /
-moz-transform-origin: X10px Y10px Z10px; /
-o-transform-origin: X10px Y10px Z10px; /
}
As alterações na imagem são em relação a uma origem, ou referência. Como padrão sempre ocorrem tendo como âncora o centro da imagem. O código abaixo exemplifica a definição da âncora: img {
transform-origin: X10px Y10px Z10px;
}
Repare que não há necessidade de indicar qual o motor de layout.