Machine Translated by Google

Transformações
em CSS
RENOVAR A FORMA DE PROJETAR

Eric A. Meyer
Machine Translated by Google

Transformações em CSS
Apresente informações de maneiras novas e impressionantes, transformando elementos CSS
em espaço bi e tridimensional. Esteja você girando uma foto, fazendo alguns truques
interessantes de perspectiva ou criando uma interface que permite revelar informações sobre a
parte traseira de um elemento, este guia prático mostra como usá-los com grande efeito.

Curto e doce, este livro é um trecho da próxima quarta edição do CSS: The Definitive Guide. Ao
comprar a edição impressa ou e-book de Transforms in CSS, você receberá um desconto em
todo o Guia Definitivo assim que for lançado. Porque esperar? Saiba como dar vida às suas
páginas da web agora.

ÿ Crie combinações interessantes de transformações 2D e

Interfaces de atuação 3D

ÿ Aprenda dois tipos de sistemas de coordenadas usados em transformações CSS: o

sistema de coordenadas cartesianas e o sistema esférico

ÿ Use a propriedade de transformação para traduzir, dimensionar, girar e inclinar

um elemento

ÿ Crie a ilusão de profundidade adicionando perspectiva a um elemento —

ou uma perspectiva a um grupo de elementos

ÿ Revelar a parte traseira de um elemento com a visibilidade da face traseira

propriedade

Eric A. Meyer é autor, palestrante, blogueiro, professor ocasional e cofundador do

An Event Apart. Ele é um veterano de duas décadas da Web e dos padrões da
Web, um ex-membro do Grupo de Trabalho de Folhas de Estilo em Cascata do
W3C e autor do O'Reilly's CSS: The Definitive Guide.

DESENVOLVIMENTO CSS/Web
Twitter: @oreillymedia
facebook.com/oreilly
US$ 9,99 CAN $ 11,99
ISBN: 978-1-491-92815-8
Machine Translated by Google

Transformações em CSS

Eric A. Meyer
Machine Translated by Google

Transformações em

CSS por Eric A. Meyer

Direitos autorais © 2015 Eric A. Meyer. Todos os direitos reservados.

Impresso nos Estados Unidos da América.

Publicado por O'Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.

Os livros da O'Reilly podem ser adquiridos para uso educacional, comercial ou promocional de vendas. Edições online também estão
disponíveis para a maioria dos títulos (http://safaribooksonline.com). Para mais informações, entre em contato com nosso departamento de
vendas corporativo/institucional: 800-998-9938 ou [email protected].

Editor: Meg Foley Designer de Interiores: David Futato

Editor de Produção: Colleen Lobner Designer de capa: Ellie Volckhausen
Editor de texto: Sonia Saruba Ilustrador: Rebecca Demarest

Revisora: Amanda Kersey

Junho de 2015: Primeira edição

Histórico de revisões para a primeira edição

29-05-2015: Primeira versão

Veja http://oreilly.com/catalog/errata.csp?isbn=9781491928158 para detalhes do lançamento.

O logotipo O'Reilly é uma marca registrada da O'Reilly Media, Inc. Transformações em CSS, a imagem da capa do salmão e a imagem
comercial relacionada são marcas registradas da O'Reilly Media, Inc.

Embora o editor e o autor tenham feito esforços de boa fé para garantir que as informações e instruções contidas neste trabalho sejam
precisas, o editor e o autor se isentam de qualquer responsabilidade por erros ou omissões, incluindo, sem limitação, responsabilidade por
danos resultantes do uso ou confiança neste trabalho. O uso das informações e instruções contidas neste trabalho é por sua conta e risco.
Se qualquer amostra de código ou outra tecnologia que este trabalho contém ou descreve está sujeita a licenças de código aberto ou direitos
de propriedade intelectual de terceiros, é sua responsabilidade garantir que seu uso esteja em conformidade com tais licenças e/ou direitos.

978-1-491-92815-8

[LSI]
Machine Translated by Google

Índice

Prefácio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . dentro

Transforma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Sistemas coordenados 1
Transformando 6
As funções de transformação 10
Mais propriedades de transformação 25
Movendo a origem 25
Escolhendo um estilo 3D 29
Mudando a Perspectiva 32
Lidando com backfaces 37
Resumo 40

iii
Machine Translated by Google
Machine Translated by Google

Prefácio

Convenções utilizadas neste livro

As seguintes convenções tipográficas são usadas neste livro:

Itálico
Indica novos termos, URLs, endereços de e-mail, nomes de arquivo e extensões de arquivo.

Largura constante
Usado para listagens de programas, bem como dentro de parágrafos para se referir a elementos de
programa, como nomes de variáveis ou funções, bancos de dados, tipos de dados, variáveis de
ambiente, instruções e palavras-chave.

Largura constante negrito

Mostra comandos ou outro texto que deve ser digitado literalmente pelo usuário.

Largura constante itálico

Mostra o texto que deve ser substituído por valores fornecidos pelo usuário ou por valores
determinados pelo contexto.

Este elemento significa uma nota geral.

Este elemento indica um aviso ou cuidado.

dentro
Machine Translated by Google

Usando exemplos de código

Este livro está aqui para ajudá-lo a fazer o seu trabalho. Em geral, se um código de exemplo for
oferecido com este livro, você poderá usá-lo em seus programas e documentação. Você não
precisa entrar em contato conosco para obter permissão, a menos que esteja reproduzindo uma
parte significativa do código. Por exemplo, escrever um programa que usa vários pedaços de
código deste livro não requer permissão. Vender ou distribuir um CD-ROM de exemplos dos
livros da O'Reilly requer permissão. Responder a uma pergunta citando este livro e citando um
código de exemplo não requer permissão. Incorporar uma quantidade significativa de código de
exemplo deste livro na documentação do seu produto requer permissão.

Agradecemos, mas não exigimos, atribuição. Uma atribuição geralmente inclui o título, autor,
editora e ISBN. Por exemplo: “Transforms in CSS por Eric A. Meyer (O'Reilly). Copyright 2015
Eric A. Meyer, 978-1-491-92815-8.”

Se você achar que o uso de exemplos de código está fora do uso justo ou da permissão dada acima,
sinta-se à vontade para nos contatar em [email protected].

Livros on-line do Safari®

Livros on-line do Safari é uma biblioteca digital sob demanda que

oferece conteúdo especializado em formato de livro e vídeo dos
principais autores do mundo em tecnologia e negócios.

Profissionais de tecnologia, desenvolvedores de software, web designers e profissionais de

negócios e criativos usam o Safari Books Online como seu principal recurso para pesquisa,
solução de problemas, aprendizado e treinamento de certificação.

O Safari Books Online oferece uma variedade de planos e preços para empresa, governo,
Educação, e indivíduos.

Os membros têm acesso a milhares de livros, vídeos de treinamento e manuscritos de pré-

publicação em um banco de dados totalmente pesquisável de editores como O'Reilly Media,
Prentice Hall Professional, Addison-Wesley Professional, Microsoft Press, Sams, Que, Peachpit
Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM
Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones
& Bartlett, Course Technology e centenas mais. Para obter mais informações sobre o Safari
Books Online, visite-nos online.

nós
| Prefácio
Machine Translated by Google

Como entrar em contato conosco

Envie comentários e perguntas sobre este livro à editora:

O'Reilly Media, Inc.

1005 Gravenstein Highway North
Sebastopol, CA 95472 800-998-9938
(nos Estados Unidos ou Canadá) 707-829-0515
(internacional ou local) 707-829-0104 (fax)

Temos uma página web para este livro, onde listamos erratas, exemplos e qualquer informação
adicional. Você pode acessar esta página em http://bit.ly/transforms-in-css.

Para comentar ou fazer perguntas técnicas sobre este livro, envie um e-mail para
[email protected] .

Para obter mais informações sobre nossos livros, cursos, conferências e notícias, consulte
nosso site em http://www.oreilly.com.

Encontre-nos no Facebook: http://facebook.com/

oreilly Siga-nos no Twitter: http://twitter.com/oreillymedia

Assista-nos no YouTube: http://www.youtube.com/oreillymedia

Prefácio | vii
Machine Translated by Google
Machine Translated by Google

Transformações

Desde o início das Cascading Style Sheets (CSS), os elementos têm sido retangulares e
firmemente orientados nos eixos horizontal e vertical. Vários truques surgiram para fazer os
elementos parecerem inclinados e assim por diante, mas por baixo de tudo havia uma grade
rígida. No final dos anos 2000, cresceu o interesse em quebrar os grilhões dessa grade e
transformar objetos de maneiras interessantes – e não apenas em duas dimensões.

Se você já posicionou um objeto, seja de forma relativa ou absoluta, então você já transformou
esse objeto. Por falar nisso, sempre que você usa floats ou truques de margem negativa (ou
ambos), você transforma um objeto. Todos esses são exemplos de tradução, ou o movimento de
um elemento de onde normalmente apareceria para algum outro lugar. Com transformações
CSS, você tem uma nova maneira de traduzir elementos e muito mais. Seja tão simples quanto
girar algumas fotos um pouco para torná-las mais naturais, ou criar interfaces onde as informações
podem ser reveladas virando elementos, ou apenas fazendo truques interessantes de perspectiva
com barras laterais, as transformações CSS podem - se você perdoar o óbvio expressão —
transforme a maneira como você projeta.

Sistemas coordenados
Antes de embarcar nesta jornada, vamos ter um momento para nos orientar. Dois tipos de
sistemas de coordenadas são usados em transformações, e é uma boa ideia estar familiarizado
com ambos.

Se você já estiver bem familiarizado com os sistemas de coordenadas cartesianas e

esféricas, particularmente os usados em computação, sinta-se à vontade para pular
para a próxima seção.

1
Machine Translated by Google

O primeiro é o sistema de coordenadas cartesianas, ou o que é freqüentemente chamado de sistema

de coordenadas x/y/z. Este sistema é uma maneira de descrever a posição de um ponto no espaço
usando dois números (para posicionamento bidimensional) ou três números (para posicionamento
tridimensional). Em CSS, o sistema utiliza três eixos: o x, ou eixo horizontal; o y, ou eixo vertical; e o z,
ou eixo de profundidade. Isso é ilustrado na Figura 1.

Figura 1. Os três eixos cartesianos usados nas transformações CSS

Para qualquer transformação 2D (bidimensional), você só precisa se preocupar com os eixos x e y. Por
convenção, valores positivos de x vão para a direita e valores negativos vão para a esquerda. Da
mesma forma, valores positivos de y vão para baixo ao longo do eixo y, enquanto valores negativos vão
para cima ao longo do eixo y.

2 | Transformações
Machine Translated by Google

Isso pode parecer um pouco estranho, já que tendemos a pensar que números mais altos devem colocar
algo mais alto, não mais baixo, como muitos de nós aprendemos na pré-álgebra.
(É por isso que o rótulo “y” está na parte inferior do eixo y na Figura 1: os rótulos são colocados na
direção positiva em todos os três eixos.) Se você tem experiência com posicionamento absoluto em
CSS, pense no valores de propriedade top para elementos posicionados absolutamente: eles são
movidos para baixo para valores superiores positivos e para cima quando top tem um comprimento
negativo.

Dado isso, para mover um elemento para a esquerda e para baixo, você daria a ele um valor x negativo
e um valor y positivo, assim:

traduzirX(-5em) traduzirY(33px)

Na verdade, esse é um valor de transformação válido, como veremos daqui a pouco. Seu efeito é traduzir
(mover) o elemento cinco ems para a esquerda e 33 pixels para baixo.

Se você quiser transformar algo no espaço tridimensional, adicione o valor do eixo az. Este eixo é
aquele que “se destaca” da tela e passa direto pela sua cabeça. Em um sentido teórico, isso é. Os
valores de z positivos estão mais próximos de você e os valores de z negativos estão mais distantes de
você. Nesse sentido, é exatamente como a propriedade de índice z .

Então, digamos que queremos pegar o elemento que movemos antes e adicionar um valor do eixo z:

traduzirX(-5em) traduzirY(33px) traduzirZ(200px)

Agora o elemento aparecerá 200 pixels mais próximo de nós do que estaria sem o valor z.

Bem, você pode se perguntar exatamente como um elemento pode ser movido 200 pixels para mais
perto de você, já que as telas holográficas são lamentavelmente raras e caras. Quantas moléculas de ar
entre você e seu monitor são equivalentes a 200 pixels? Como se parece um elemento que se aproxima
de você e o que acontece se ele se aproximar demais? Estas são excelentes questões que abordaremos
mais adiante. Por enquanto, apenas aceite que mover um elemento ao longo do eixo z parece aproximá-
lo ou afastá-lo.

A coisa realmente importante a lembrar é que cada elemento carrega seu próprio quadro de referência
e, portanto, considera seus eixos em relação a si mesmo. Ou seja, se você girar um elemento, os eixos
girarão junto com ele, conforme ilustrado na Figura 2. Quaisquer outras transformações são calculadas
em relação a esses eixos girados, não aos eixos da tela.

Sistemas de Coordenadas | 3
Machine Translated by Google

Figura 2. Quadros de referência elementares

Falando em rotações, o outro sistema de coordenadas usado nas transformações CSS é um sistema
esférico, que descreve ângulos no espaço 3D. Está ilustrado na Figura 3.

Figura 3. O sistema de coordenadas esféricas usado em transformações CSS

Para fins de transformações 2D, você só precisa se preocupar com um único sistema polar de 360 graus:
aquele que fica no plano descrito pelos eixos x e y. Quando se trata de rotações, uma rotação 2D na
verdade descreve uma rotação em torno do eixo z. Da mesma forma, as rotações ao redor do eixo x
inclinam o elemento em sua direção ou para longe de você, e as rotações ao redor do eixo y giram o
elemento de um lado para o outro. Eles estão ilustrados na Figura 4.

4 | Transformações
Machine Translated by Google

Figura 4. Rotações em torno dos três eixos

Mas voltando às rotações 2D. Suponha que você queira girar um elemento 45 graus no sentido
horário no plano da tela (ou seja, ao redor do eixo z). O valor de transformação que você
provavelmente usará é:

girar (45 graus)

Mude isso para –45deg, e o elemento irá girar no sentido anti-horário (no sentido anti-horário
para nossos amigos internacionais) em torno do eixo z. Em outras palavras, ele irá girar no
plano xy, conforme ilustrado na Figura 5.

Figura 5. Rotações no plano xy

Sistemas de Coordenadas | 5
Machine Translated by Google

Muito bem, agora que nos orientamos, vamos começar com as transformações!

Transformando
Há realmente apenas uma propriedade que aplica transformações, juntamente com algumas
propriedades auxiliares que afetam exatamente como as transformações são aplicadas. Vamos
começar com o Big Cheese.

transformar

Valores: <transform-list> | nenhum | herdar

Valor inicial: Nenhum

Aplica-se a: Todos os elementos, exceto caixas de “nível inline atômico” (ver explicação)

Herdado: Não

Porcentagens: Consulte o tamanho da caixa delimitadora (consulte a explicação)

Valor calculado: conforme especificado, exceto para valores de comprimento relativo, que são convertidos em comprimento

absoluto

Primeiro, vamos esclarecer a questão da caixa delimitadora. Para qualquer elemento afetado pelo
CSS, esta é a caixa de borda; ou seja, a borda mais externa da borda do elemento.
Isso significa que quaisquer contornos e margens são ignorados para fins de cálculo da caixa
delimitadora.

Se um elemento table-display está sendo transformado, sua caixa delimitadora

é a caixa de wrapper de tabela, que inclui a caixa de tabela e qualquer caixa de
legenda associada.

Se você estiver transformando um elemento Scalable Vector Graphics (SVG) com CSS, sua caixa
delimitadora será a caixa delimitadora de objeto definido por SVG. Simples o suficiente!

Observe que todos os elementos transformados (ou seja, elementos com transform definido para um
valor diferente de none) têm seu próprio contexto de empilhamento. Embora o elemento dimensionado
possa ser muito menor ou maior do que era antes da aplicação da transformação, o espaço real no

6 | Transformações
Machine Translated by Google

página que o elemento ocupa permanece a mesma de antes da aplicação da transformação.

Isso é verdade para todas as funções de transformação.

Agora, a entrada de valor <transform-list> requer alguma explicação. Esse espaço reservado se refere a uma lista
de uma ou mais funções de transformação, uma após a outra, em formato separado por espaço. Fica assim, com o
resultado mostrado na Figura 6:

#example {transform: girar(30deg) skewX(-25deg) scaleY(2);}

Figura 6. Um elemento div transformado

As funções são processadas uma de cada vez, começando pela primeira (mais à esquerda) e continuando até a
última (mais à direita). Essa ordem de processamento do primeiro ao último é importante, porque alterar a ordem
pode levar a resultados drasticamente diferentes. Considere as duas regras a seguir, que têm os resultados
mostrados na Figura 7:

img#one {transform: translateX(200px) girar(45deg);} img#two

{transform: girar(45deg) translateX(200px);}

Figura 7. Listas de transformação diferentes, resultados diferentes

Na primeira instância, uma imagem é convertida (movida) 200 pixels ao longo de seu eixo x e, em seguida, girada
45 graus. Na segunda instância, uma imagem é girada 45 graus e, em seguida, movida 200 pixels ao longo de seu
eixo x — esse é o eixo x do elemento transformado, não do elemento pai, página ou viewport. Em outras palavras,
quando um elemento é rotaÿ

Transformando | 7
Machine Translated by Google

ted, seu eixo x (junto com seus outros eixos) gira junto com ele. Todas as transformações de
elemento são conduzidas em relação ao próprio quadro de referência do elemento.

Compare isso com uma situação em que um elemento é traduzido e depois dimensionado, ou vice-
versa; não importa qual é qual, porque o resultado final é o mesmo:

img#one {transform: translateX(100px) scale(1.2);} img#two

{transform: scale(1.2) translateX(100px);}

As situações em que a ordem não importa são superadas em número pelas situações em que
importa; então, em geral, é uma boa ideia supor que a ordem sempre importa, mesmo quando
tecnicamente não importa.

Observe que quando você tem uma série de funções de transformação, todas elas devem ser
formatadas corretamente; isto é, eles devem ser válidos. Se mesmo uma função for inválida, ela
tornará o valor inteiro inválido. Considerar:

img#one {transform: translateX(100px) scale(1.2) rotate(22);}

Como o valor paraturn() é inválido—os valores rotacionais devem ter uma unidade—o valor inteiro
é descartado. A imagem em questão simplesmente ficará lá em seu estado inicial não transformado,
nem traduzida nem dimensionada, muito menos girada.

Também é o caso que as transformações geralmente não são cumulativas. Ou seja, se você aplicar
uma transformação a um elemento e depois quiser adicionar uma transformação, precisará reafirmar
a transformação original. Considere os seguintes cenários, ilustrados na Figÿ
8:

#ex01 {transform: girar(30deg) skewX(-25deg);} #ex01

{transform: scaleY(2);} #ex02 {transform: girar(30deg)
skewX(-25deg);} #ex02 {transform: girar( 30 graus)
inclinaçãoX(-25 graus) escalaY (2);}

Figura 8. Substituindo ou modificando transformações

No primeiro caso, a segunda regra substitui completamente a primeira, significando que o elemento
só é dimensionado ao longo do eixo y. Isso realmente faz algum sentido; é o mesmo que declarar
um tamanho de fonte e, em outro lugar, declarar um tamanho de fonte diferente para o mesmo

8 | Transformações
Machine Translated by Google

elemento. Você não obtém um tamanho de fonte cumulativo dessa maneira. Você só tem um
tamanho ou outro. No segundo exemplo, a totalidade do primeiro conjunto de transformações é
incluída no segundo conjunto, portanto, todas são aplicadas junto com a função scaleY() .

Há uma exceção a isso, que é que as transformações animadas, seja usando transições ou
animações reais, são aditivas. Dessa forma, você pode pegar um elemento transformado e animar
uma de suas funções de transformação sem substituir as outras. Por exemplo, suponha que você
tenha:

img#one {transform: translateX(100px) scale(1.2);}

Se você animar o ângulo de rotação do elemento, ele irá girar de seu estado transladado e
dimensionado para o novo ângulo, e sua translação e escala permanecerão no lugar.

O que torna isso interessante é que mesmo que você não especifique explicitamente uma transição
ou animação, você ainda pode criar transformações aditivas por meio das pseudoclasses de
interação do usuário, como :hover. Isso porque coisas como efeitos de hover são tipos de transições;
eles simplesmente não são invocados usando as propriedades de transição. Assim, você pode
declarar:

img#one {transform: translateX(100px) scale(1.2);}

img#one:hover {transform: girar(-45deg);}

Isso giraria a imagem traduzida e dimensionada 45 graus para a esquerda ao passar o mouse. A
rotação ocorreria em zero segundos porque nenhum intervalo de transição foi declarado, mas ainda
é uma transição implícita. Assim, qualquer mudança de estado pode ser pensada como uma
transição e, portanto, quaisquer transformações aplicadas como resultado dessas mudanças de
estado são aditivas às transformações anteriores.

Há uma ressalva importante: no momento da redação deste artigo, as transformações não são
aplicadas a caixas de “nível inline atômico”. Estas são caixas embutidas como spans, hyperlinks e
assim por diante. Esses elementos podem ser transformados se seu pai em nível de bloco for
transformado, caso em que eles vão junto. Mas você não pode simplesmente girar um span a
menos que tenha alterado sua função de exibição por meio de display: block, display: inline-block
ou algo nesse sentido. A razão para esta limitação se resume a uma incerteza. Suponha que você
tenha um intervalo (ou qualquer caixa de nível embutido) que se desfaça em várias linhas. Se você
girar, o que acontece? Cada caixa de linha gira em relação a si mesma ou todas as caixas de linha
devem ser giradas como um único grupo? Não há uma resposta clara, e o debate continua, então,
por enquanto, você não pode transformar diretamente as caixas de nível inline.

No final de 2014, transform e suas propriedades associadas ainda precisavam

ser prefixadas pelo fornecedor nos navegadores WebKit e Blink, como Safari e
Chrome. Nenhum prefixo foi necessário em outros principais agentes de usuário.
Esta restrição foi finalmente retirada no início de 2015.

Transformando | 9
Machine Translated by Google

As funções de transformação

Existem, no momento da redação deste artigo, 21 funções de transformação diferentes, empregando

vários padrões de valor diferentes para realizar seus trabalhos. A Tabela 1 fornece uma lista de todas as
funções de transformação disponíveis, menos seus padrões de valor.

Tabela 1. Funções de transformação

traduzir() escala() girar() enviesar() matriz()

traduzir3d() escala3d() girar3d() enviesarX() matriz3d()
traduzirX() escalaX() girarX() enviesarY() perspectiva()
traduzirY() escalaY() girarY()
traduzirZ() escalaZ() girarZ()

Como dito anteriormente, o padrão de valor mais comum para transform é uma lista separada por
espaços de uma ou mais funções, processadas do primeiro (mais à esquerda) ao último (mais à direita),
e todas as funções devem ter valores válidos. Se qualquer uma das funções for inválida, ela invalidará
todo o valor de transform, evitando assim qualquer transformação.

Funções de tradução

Uma transformação de translação é apenas um movimento ao longo de um ou mais eixos. Por exemplo,
translateX() move um elemento ao longo de seu próprio eixo x, translateY() o move ao longo de seu eixo
y e translateZ() o move ao longo de seu eixo z.

Funções Valores permitidos

translateX(), translateY() <comprimento> | <porcentagem>

Essas são geralmente chamadas de funções de tradução “2D”, pois podem deslizar um elemento para
cima e para baixo, ou de um lado para o outro, mas não para frente ou para trás ao longo do eixo z.
Cada uma dessas funções aceita um único valor de distância, expresso como comprimento ou
porcentagem.

Se o valor for um comprimento, então o efeito é sobre o que você esperaria. Traduza um elemento 200
pixels ao longo do eixo x com translateX(200px), e ele moverá 200 pixels para a direita. Mude isso para
translateX(-200px), e ele se moverá 200 pixels para a esquerda. Para translateY(), valores positivos
movem o elemento para baixo, enquanto valores negativos movem para cima, ambos em relação ao
próprio elemento. Assim, se você virar o elemento de cabeça para baixo por rotação, valores de
translateY() positivos na verdade moverão o elemento para baixo na página.

10 | Transformações
Machine Translated by Google

Se o valor for uma porcentagem, então a distância é calculada como uma porcentagem do próprio
tamanho do elemento. Assim, translateX(50%) moverá um elemento com 300 pixels de largura e 200
pixels de altura para a direita em 150 pixels, e translateY(-10%) moverá esse mesmo elemento para cima
(em relação a si mesmo) em 20 pixels.

Função Valores permitidos

traduzir() [ <comprimento> | <porcentagem> ] [, <comprimento> | <porcentagem>]?

Se você deseja traduzir um elemento ao longo dos eixos x e y ao mesmo tempo, o translate() simplifica.
Apenas forneça o valor x primeiro e o valor y depois, e ele agirá da mesma forma como se você
combinasse translateX() translateY(). Se você omitir o valor de y, ele será considerado zero. Assim,
translate(2em) é tratado como se fosse translate(2em,0), que também é o mesmo que translateX(2em).
Veja a Figura 9 para alguns exemplos de tradução 2D.

Figura 9. Traduzindo em duas dimensões

De acordo com a versão mais recente da especificação, ambas as funções de tradução 2D podem
receber um número sem unidade. Nesse caso, o número é tratado como sendo expresso em termos de
uma “unidade de usuário”, que é tratada da mesma forma que um pixel, a menos que definido de outra
forma. A especificação CSS não explica como uma unidade de usuário é definida de outra forma; no
entanto, a especificação SVG sim, embora brevemente. No campo, nenhum navegador testado até o
momento da redação deste artigo suportava números sem unidades de valores de tradução, então a
capacidade é acadêmica, na melhor das hipóteses.

Transformando | 11
Machine Translated by Google

Função Valor permitido

traduzirZ() <comprimento>

Esta função traduz elementos ao longo do eixo z, movendo-os assim para a terceira dimensão.
Ao contrário das funções de tradução 2D, translateZ() só aceita valores de comprimento. Valores
percentuais não são permitidos para translateZ(), ou mesmo para qualquer valor do eixo z.

Funções Valores permitidos

translate3d() [ <comprimento> | <porcentagem> ], [ <comprimento> | <porcentagem>],

[ <comprimento> ]

Assim como o translate() faz para as traduções xey, translate3d() é uma função abreviada que
incorpora os valores de tradução x, yez em uma única função.
Isso é obviamente útil se você quiser mover um elemento para cima, para cima e para frente de
uma só vez. Consulte a Figura 10 para obter uma ilustração de como a tradução 3D funciona. Lá,
cada seta representa a translação ao longo desse eixo, chegando a um ponto no espaço 3D. As
linhas tracejadas mostram a distância e direção do ponto de origem (a interseção dos três eixos)
e a distância acima do plano xz.

Ao contrário de translate(), não há fallback para situações em que translate3d() não contém três
valores. Assim, translate3d(1em,-50px) deve ser tratado como inválido pelos agentes do usuário
em vez de ser considerado translate3d(2em,-50px,0).

Funções de escala

Uma transformação de escala torna um elemento maior ou menor, dependendo do valor que você
usa. Esses valores são números reais sem unidade e são sempre positivos. No plano 2D, você
pode dimensionar ao longo dos eixos x e y individualmente ou dimensioná-los juntos.

Funções Valor permitido

escalaX(), escalaY(), escalaZ() <número>

12 | Transformações
Machine Translated by Google

Figura 10. Traduzindo em três dimensões

Transformando | 13
Machine Translated by Google

O valor numérico fornecido a uma função de escala é um multiplicador; assim, scaleX(2) tornará um
elemento duas vezes maior do que era antes da transformação, enquanto scaleY(0,5) o tornará metade da
altura. Dado isso, você pode esperar que os valores percentuais sejam permitidos como valores de escala,
mas não são.

Valor permitido da função

escala() <número> [, <número>]?

Se você deseja dimensionar ao longo de ambos os eixos simultaneamente, use scale(). O valor x é sempre
o primeiro e o y sempre o segundo, então scale(2,0.5) fará com que o elemento tenha duas vezes mais
largura e metade da altura que tinha antes de ser transformado. Se você fornecer apenas um número, ele
será usado como valor de escala para ambos os eixos; assim, scale(2) tornará o elemento duas vezes mais
largo e duas vezes mais alto. Isso está em contraste com translate(), onde um segundo valor omitido é
sempre definido como zero. scale(1) dimensionará um elemento para ter exatamente o mesmo tamanho
que tinha antes de você dimensioná-lo, assim como scale(1,1). Apenas no caso de você estar morrendo de
vontade de fazer isso.

A Figura 11 mostra alguns exemplos de dimensionamento de elementos, usando as funções de

dimensionamento de eixo único, bem como a escala combinada().

Figura 11. Elementos em escala

Claro, se você pode dimensionar em duas dimensões, também pode dimensionar em três. CSS oferece
scaleZ() para dimensionar apenas ao longo do eixo z e scale3d() para dimensionar ao longo de todos os
três eixos de uma só vez. Estes realmente só têm efeito se o elemento tiver alguma profundidade, elementos
que não têm por padrão. Se você fizer uma mudança que transmita profundidade - digamos, girar um

14 | Transformações
Machine Translated by Google

elemento em torno dos eixos x ou y—então há uma profundidade que pode ser dimensionada, e
scaleZ() ou scale3d() podem fazê-lo.

Função Valor permitido

scale3d() <número>, <número>, <número>

Semelhante a translate3d(), scale3d() requer que todos os três números sejam válidos. Se você
não fizer isso, o scale3d() malformado invalidará todo o valor de transformação ao qual ele
pertence.

Funções de rotação

Uma função de rotação faz com que um elemento seja girado em torno de um eixo ou em torno
de um vetor arbitrário no espaço 3D. Existem quatro funções de rotação simples e uma função
menos simples destinada especificamente para 3D.

Funções Valores permitidos

girar(), girarX(), girarY(), girarZ() <ângulo>

Todas as quatro funções básicas de rotação aceitam apenas um valor: um grau. Isso pode ser
expresso usando qualquer uma das unidades de grau válidas (graus, grad, rad e turn) e um
número, positivo ou negativo. Se o número de um valor estiver fora do intervalo normal para a
unidade especificada, ele será normalizado para caber no intervalo aceito. Em outras palavras,
um valor de 437 graus será inclinado da mesma forma que se fosse 77 graus, ou seja, -283 graus.

Observe, no entanto, que eles são exatamente equivalentes apenas se você não animar a rotação
de alguma forma. Ou seja, animar uma rotação de 1100 graus irá girar o elemento várias vezes
antes de parar em uma inclinação de -20 graus (ou 340 graus, se você preferir). Por outro lado,
animar uma rotação de -20 graus irá inclinar o elemento um pouco para a esquerda, sem rotação;
e, claro, animar uma rotação de 340 graus irá animar um giro quase completo para a direita. Todas
as três animações chegam ao mesmo estado final, mas o processo de chegar lá é muito diferente
em cada caso.

A função rotate() é uma rotação 2D reta, e a que você provavelmente usará.

É equivalente a rotateZ() porque gira o elemento em torno do eixo z (aquele que sai direto da tela
e passa pelos olhos). De maneira semelhante, rotateX() causa rotação ao redor do eixo x, fazendo
com que o elemento se incline em sua direção ou se afaste de você; e rotateY() gira o elemento
em torno de seu eixo y, como se fosse uma porta. Tudo isso está ilustrado na Figura 12.

Transformando | 15
Machine Translated by Google

Figura 12. Rotações em torno dos três eixos

Vários dos exemplos na Figura 12 apresentam uma aparência totalmente 3D.

Isso só é possível com certos valores das propriedades transform-style e
perspective, descritos em uma seção posterior e omitidos aqui para maior
clareza. Isso será verdade ao longo deste texto em qualquer situação em que
os elementos transformados em 3D pareçam ser totalmente tridimensionais.
É importante ter isso em mente porque se você apenas tentar aplicar as
funções de transformação mostradas, não obterá os mesmos resultados
visuais das figuras.

Função Valor permitido

girar3d() <número>, <número>, <número>, <ângulo>

Se você está familiarizado com vetores e deseja girar um elemento através do espaço 3D,
então rotate3d() é para você. Os três primeiros números especificam os componentes x, yez
de um vetor no espaço 3D, e o valor do grau (ângulo) determina a quantidade de rotação
em torno do vetor 3D declarado.

Para começar com um exemplo simples, o equivalente 3D para girar(45deg) é

girar3d(0,0,1,45deg). Isso especifica um vetor de magnitude zero nos eixos xey e uma
magnitude de 1 ao longo do eixo z. Em outras palavras, descreve o eixo z.
O elemento é então girado 45 graus em torno desse vetor, conforme mostrado na Figura 13.
Esta figura também mostra os valores apropriados de rotate3d() para girar um elemento em
45 graus em torno dos eixos x e y.

16 | Transformações
Machine Translated by Google

Figura 13. Rotações em torno de vetores 3D

Um pouco mais complicado é algo como rotate3d(-0.95,0.5,1,45deg), onde o vetor descrito aponta para o espaço
3D entre os eixos. Para entender como isso funciona, vamos começar com um exemplo simples: rotateZ(45deg)
(ilustrado na Figura 13). O equivalente é girar3d(0,0,1,45deg). Os três primeiros números descrevem os
componentes de um vetor que não tem magnitude x ou y e magnitude z igual a 1. Assim, ele aponta ao longo do
eixo z em uma direção positiva; isto é, em direção ao espectador.

O elemento é então girado no sentido horário enquanto você olha para a origem do vetor.
Simples o suficiente.

Da mesma forma, o equivalente 3D de girarX(45deg) é girar3d(1,0,0,45deg). O vetor aponta ao longo do eixo x

na direção positiva (para a direita). Se você ficar no final desse vetor e olhar em direção à sua origem, então você
gira o elemento 45 graus no sentido horário ao redor do vetor. Assim, a partir do posicionamento usual do
visualizador, a parte superior do elemento gira para longe e a parte inferior gira em direção ao visualizador.

Vamos torná-lo um pouco mais complexo: suponha que você tenha rotate3d(1,1,0,45deg).
Quando visualizado em seu monitor, descreve um vetor que vai do canto superior esquerdo ao canto inferior
direito, passando pelo centro do elemento (por padrão, de qualquer forma; veremos como alterar isso mais tarde).
Assim, o retângulo do elemento tem uma linha passando por ele em um ângulo de 45 graus, efetivamente
cortando-o. Em seguida, o vetor gira 45 graus, levando o elemento com ele. A rotação é no sentido horário quando
você olha de volta para a origem do vetor, então, novamente, a parte superior do elemento gira para longe do
visualizador, enquanto a parte inferior gira em direção ao visualizador. Se tivéssemos de alterar a rotação para
rotate3d(1,1,0,90deg), então o elemento estaria de frente para o visualizador, inclinado em um ângulo de 45 graus
e voltado para o canto superior direito. Experimente com um pedaço de papel: desenhe uma linha do canto
superior esquerdo para o canto inferior direito e gire o papel ao redor dessa linha.

Ok, dado tudo isso, tente visualizar como o vetor é determinado para rotate3d(-0.95,0.5,1,45deg). Se assumirmos
um cubo de 200 pixels de lado, os componentes do vetor estão 190 pixels à esquerda ao longo do eixo x, 100
pixels para baixo ao longo do y

Transformando | 17
Machine Translated by Google

eixo e 200 pixels em direção às visualizações ao longo do eixo z. O vetor vai do ponto de
origem (0, 0, 0) ao ponto (-190px, 100px, 200px). A Figura 14 retrata esse vetor, bem como
o resultado final apresentado ao espectador.

Figura 14. Rotação em torno de um vetor 3D e como esse vetor é determinado

Assim, o vetor é como uma haste de metal atravessada pelo elemento que está sendo girado. Quando
olhamos para trás ao longo da linha do vetor, a rotação é de 45 graus no sentido horário. Mas como o
vetor aponta para a esquerda, para baixo e para frente, isso significa que o canto superior esquerdo do
elemento gira em direção ao observador, e o canto inferior direito gira para fora, como mostrado na Fig .
14.

Apenas para ser claro, girar3d(1,1,0,45deg) não é equivalente a girarX(45deg) girarY(45deg)

girarZ(0deg)! É um erro fácil de cometer, e muitas pessoas – incluindo vários autores de
tutoriais online e, até pesquisar e escrever esta seção, seu humilde correspondente – o
cometeram. Parece que deveria ser equivalente, mas na verdade não é. Se colocarmos
esse vetor dentro do cubo imaginário 200 × 200 × 200 mencionado anteriormente, o eixo de
rotação iria do ponto de origem até um ponto 200 pixels à direita e 200 pixels para baixo
(200, 200, 0).

Feito isso, o eixo de rotação está disparando através do elemento do canto superior esquerdo ao
canto inferior direito, em um ângulo de 45 graus. O elemento então gira 45 graus no sentido horário
em torno dessa diagonal, enquanto você olha para trás em direção à sua origem (o canto superior
esquerdo), que gira o canto superior direito do elemento para longe e um pouco para a esquerda,
enquanto o canto inferior esquerdo gira mais perto e um pouco para a direita. Isso é distintamente diferente do que

18 | Transformações
Machine Translated by Google

o resultado de girarX(45deg) girarY(45deg) girarZ(0deg), como você pode ver na Figura 15.

Figura 15. A diferença entre girar em torno de dois eixos e girar em torno de um eixo 3D

Funções de inclinação

Quando você inclina um elemento, você o inclina ao longo de um ou ambos os eixos x e y. Não
há eixo z ou outro desvio 3D.

Funções Valor permitido

skewX(), skewY() <ângulo>

Em ambos os casos, você fornece um valor de ângulo e o elemento é inclinado para corresponder
a esse ângulo. É muito mais fácil mostrar a distorção do que tentar explicá-la em palavras, então
a Figura 16 mostra vários exemplos de distorção ao longo dos eixos x e y.

Figura 16. Inclinação ao longo dos eixos x e y

Valores permitidos da função

skew() <ângulo> [, <ângulo> ]?

Transformando | 19
Machine Translated by Google

O comportamento de incluir skew(a,b) é diferente de incluir skewX(a) com skewY(b). Em vez disso, especifica uma
inclinação 2D usando a operação de matriz [ax,ay]. A Figura 17 mostra alguns exemplos dessa distorção de matriz e
como eles diferem das transformações de distorção dupla que parecem iguais no início, mas não são.

Figura 17. Elementos distorcidos

Se você fornecer dois valores, o ângulo de inclinação x é sempre o primeiro e o ângulo de inclinação y vem em
segundo lugar. Se você deixar de fora um ângulo de inclinação, ele será tratado como zero.

A função de perspectiva Se

você estiver transformando um elemento no espaço 3D, provavelmente desejará que ele tenha alguma perspectiva.
A perspectiva dá a aparência de profundidade de frente para trás e você pode variar a quantidade de perspectiva
aplicada a um elemento.

Função Valores permitidos

perspectiva() <comprimento>

Pode parecer um pouco estranho que você especifique a perspectiva como uma distância. Afinal, perspectiva (200px)
parece um pouco estranha quando você não pode realmente medir pixels ao longo do eixo z. E, no entanto, aqui
estamos. Você fornece um comprimento, e a ilusão de profundidade é construída em torno desse valor. Números
mais baixos criam uma perspectiva mais extrema, como se você estivesse bem perto do elemento e o visualizando
através de uma lente olho de peixe.
Números mais altos criam uma perspectiva mais suave, como se estivesse vendo o elemento através de uma lente
de zoom de longe. Valores de perspectiva realmente altos criam um efeito isométrico.

Isso faz um certo sentido. Se você visualizar a perspectiva como uma pirâmide, com seu ponto de vértice na origem
da perspectiva e sua base a coisa mais próxima de você, então uma distância menor entre o ápice e a base criará
uma pirâmide mais rasa e, portanto, uma distorção mais extrema. Isso é ilustrado na Figura 18, com pirâmides
hipotéticas representando distâncias de perspectiva de 200 px, 800 px e 2.000 px.

20 | Transformações
Machine Translated by Google

Figura 18. Diferentes pirâmides de perspectiva

Na documentação do Safari, a Apple escreve que valores de perspectiva abaixo de 300px tendem a ser
extremamente distorcidos, valores acima de 2000px criam distorção “muito leve” e valores entre 500px e
1000px criam “perspectiva moderada ” . série de elementos com exatamente a mesma rotação exibida
com valores de perspectiva variados.

Figura 19. Os efeitos de valores de perspectiva variados

Os valores de perspectiva devem sempre ser positivos, comprimentos diferentes de zero. Qualquer outro
valor fará com que a função perspective() seja ignorada. Observe também que sua colocação na lista de
funções é muito importante. Se você observar o código da Figura 19, o

1 http://bit.ly/safari-2d-3d-transforms

Transformando | 21
Machine Translated by Google

A função perspective() vem antes da função girarY() . Se você invertesse a ordem, a rotação aconteceria
antes que a perspectiva fosse aplicada, então todos os quatro exemplos na Figura 19 teriam a mesma
aparência. Portanto, se você planeja aplicar um valor de perspectiva por meio da lista de funções de
transformação, certifique-se de que ele venha primeiro, ou pelo menos antes de qualquer transformação
que dependa dele. Isso serve como um lembrete particularmente claro de que a ordem em que você
escreve as funções de transformação pode ser muito importante.
tanto

Observe que a função perspective() é muito semelhante à perspectiva

de propriedade, que será abordada posteriormente, mas são
aplicadas de maneiras criticamente diferentes. Geralmente, você
desejará usar a propriedade perspective em vez da função
perspective() , mas pode haver exceções.

Funções de matriz

Se você é um fã particular de matemática avançada ou piadas antigas derivadas dos filmes dos irmãos
Wachowski, essas funções serão suas favoritas.

Função Valores permitidos

matriz() <número> [, <número> ]{5,5}

Na especificação de transformações CSS, encontramos a descrição incisiva de matrix() como uma

função que “especifica uma transformação 2D na forma de uma matriz de transformação dos seis
valores af”.

Primeiras coisas primeiro: um valor válido de matrix() é uma lista de seis números separados por
vírgula. Nem mais nem menos. Os valores podem ser positivos ou negativos. Em segundo lugar, o
valor descreve o estado final transformado do elemento, combinando todos os outros tipos de
transformação (rotação, inclinação e assim por diante) em uma sintaxe muito compacta. Terceiro, muito
poucas pessoas realmente usam essa sintaxe.

Na verdade, não vamos passar pelo complicado processo de fazer a matemática da matriz. Para a
maioria dos leitores, seria uma parede de aparente rabiscos de dar água nos olhos; e quanto ao resto,
seria tempo perdido em território familiar. Você certamente pode pesquisar os meandros dos cálculos
matriciais on-line, e encorajo qualquer pessoa interessada a fazê-lo. Veremos apenas os conceitos
básicos de sintaxe e uso em CSS.

Aqui está um breve resumo de como ele funciona. Digamos que você tenha esta função aplicada a um
elemento:

matriz (0,838671, 0,544639, -0,692519, 0,742636, 6,51212, 34,0381)

Essa é a sintaxe CSS usada para descrever essa matriz de transformação:

22 | Transformações
Machine Translated by Google

0,838671 -0,692519 0 6,51212

0,544639 0,742636 0 34,0381
0 0 1 0
0 0 0 1

Certo. Então, o que isso faz? Tem o resultado mostrado na Figura 20, que é exatamente o
mesmo resultado que escrever isso:

girar(33deg) traduzir(24px,25px) skewX(-10deg)

Figura 20. Um elemento transformado em matriz e seu equivalente funcional

O que isso se resume é que, se você estiver familiarizado ou precisar fazer uso de matriz
cálculos, você pode e deve absolutamente usá-los. Se não, você pode encadear muito
funções de transformação mais legíveis por humanos e obter o elemento para o mesmo
estado final.

Agora, isso era para transformações 2D simples. E se você quiser usar uma matriz para transÿ
forma através de três dimensões?

Função Valores permitidos

matrix3d() <número> [, <número> ]{15,15}

Novamente, apenas por diversão, vamos saborear a definição de matrix3d() do CSS Transÿ
especificação de formulários: “especifica uma transformação 3D como uma matriz homogênea 4 × 4 de
16 valores em ordem de coluna principal.” Isso significa que o valor de matrix3d deve ser uma lista de
16 números separados por vírgula, nem mais nem menos. Esses números são organizados em um 4 ×
4 grade na ordem das colunas, de modo que a primeira coluna da matriz é formada pelo primeiro conjunto de

Transformando | 23
Machine Translated by Google

quatro números no valor, a segunda coluna pelo segundo conjunto de quatro números, o
terceira coluna pelo terceiro conjunto, e assim por diante. Assim, você pode tomar a seguinte função:

matriz3d(
0,838671, 0, -0,544639, 0,00108928,
-0,14788, 1, 0,0960346, -0,000192069,
0,544639, 0, 0,838671, -0,00167734,
20.1281, 25, -13.0713, 1.02614)

E escreva como esta matriz:

0,838671 -0,14788 0,544639 20.1281

0 1 0 25
-0,544639 0,0960346 0,838671 -13.0713
0,00108928 -0,000192069 -0,00167734 1,02614

Ambos têm um estado final equivalente a:

perspectiva(500px) girarY(33deg) traduzir(24px,25px) skewX(-10deg)

como mostrado na Figura 21.

Figura 21. Um elemento transformado em matriz 3d e seu equivalente funcional

Uma nota sobre a equivalência de estado final

É importante ter em mente que apenas os estados finais de uma função matrix() e de
uma cadeia equivalente de funções de transformação, podem ser consideradas idênticas. Isso é para
mesma razão discutida na seção sobre rotação: porque um ângulo de rotação de
393 graus terminará com a mesma rotação visível de um ângulo de 33 graus. Isso importa se
você está animando a transformação, já que a primeira fará com que o elemento faça um
barril rolar na animação, enquanto o último não. A versão matrix() deste

24 | Transformações
Machine Translated by Google

o estado final também não incluirá o rolo do barril. Em vez disso, ele sempre usará a rotação mais
curta possível para atingir o estado final.

Para ilustrar o que isso significa, considere o seguinte: uma cadeia de transformação e seu equivalente
matrix() :

girar (200 graus) traduzir (24px,25px) skewX (-10 graus)

matriz (-0,939693, -0,34202, 0,507713, -0,879385, -14,0021, -31,7008)

Observe a rotação de 200 graus. Nós naturalmente interpretamos isso como uma rotação no sentido
horário de 200 graus, o que acontece. Se essas duas transformações forem animadas, no entanto,
elas agirão de maneira diferente: a versão de funções encadeadas realmente girará 200 graus no
sentido horário, enquanto a versão matrix() girará 160 graus no sentido anti-horário. Ambos terminarão
no mesmo lugar, mas chegarão lá de maneiras diferentes.

Existem diferenças semelhantes que surgem mesmo quando você pode pensar que não.
Mais uma vez, isso ocorre porque uma transformação matrix() sempre seguirá o caminho mais curto
possível para o estado final, enquanto uma cadeia de transformação pode não. (Na verdade,
provavelmente não.) Considere estas transformações aparentemente equivalentes:

girar (160 graus) traduzir (24px,25px) girar (-30 graus) traduzir (-100px) matriz
(-0,642788, 0,766044, -0,766044, -0,642788, 33,1756, -91,8883)

Como sempre, eles acabam no mesmo lugar. Quando animados, porém, os elementos seguirão
caminhos diferentes para atingir esse estado final. Eles podem não ser obviamente diferentes à
primeira vista, mas a diferença ainda está lá.

Claro, nada disso importa se você não estiver animando a transformação, mas é uma distinção
importante a ser feita, porque você nunca sabe quando vai decidir começar a animar as coisas.
(Espero que depois de ler o texto complementar sobre animações!)

Mais propriedades de transformação

Além da propriedade de transformação básica , existem algumas propriedades relacionadas que

ajudam a definir coisas como o ponto de origem de uma transformação, a perspectiva usada para
uma “cena” e muito mais.

Movendo a Origem Até

agora, todas as transformações que vimos compartilharam uma coisa em comum: o centro preciso
do elemento foi usado como origem da transformação. Por exemplo, ao girar o elemento, ele gira em
torno de seu centro, em vez de, digamos, um canto. Este é o comportamento padrão, mas com a
propriedade transform-origin, você pode alterá-lo.

Mais Propriedades de Transformação | 25

Machine Translated by Google

origem de transformação

Valores: [esquerda | centro | direito | topo | inferior | <porcentagem> | <comprimento> ] |

[esquerda | centro | direito | <porcentagem> | <comprimento> ]

[ topo | centro | inferior | <porcentagem> | <comprimento> ] <comprimento>?
|

Valor inicial: 50% 50%

Aplica-se a: Qualquer elemento transformável

Herdado: Não

Porcentagens: Consulte o tamanho da caixa delimitadora (consulte a explicação)

Valor calculado: uma porcentagem, exceto para valores de comprimento, que são convertidos em um comprimento absoluto

A definição da sintaxe parece realmente obscura e confusa, mas na verdade é muito simples na prática. Com
transform-origin, você fornece duas ou três palavras-chave para definir o ponto em torno do qual as
transformações devem ser feitas: primeiro a horizontal, depois a vertical e, opcionalmente, um comprimento ao
longo do eixo z. Para os eixos horizontal e vertical, você pode usar palavras-chave em inglês simples como top
e right, percentagens, comprimentos ou uma combinação de diferentes tipos de palavras-chave. Para o eixo z,
você não pode usar palavras-chave ou porcentagens em inglês simples, mas pode usar qualquer valor de
comprimento. Pixels são de longe os mais comuns.

Os valores de comprimento são tomados como uma distância a partir do canto superior esquerdo do elemento.
Assim, transform-origin: 5em 22px colocará a origem da transformação 5 em à direita do lado esquerdo do
elemento e 22 pixels abaixo do topo do elemento. Da mesma forma, transform-origin: 5em 22px -200px irá
colocá-lo 5 em acima, 22 pixels para baixo e 200 pixels de distância; ou seja, 200 pixels atrás do local onde o
elemento está.

As porcentagens são calculadas em relação ao eixo e tamanho correspondentes do elemento, como

deslocamentos do canto superior esquerdo do elemento. Por exemplo, transform-origin: 67% 40% colocará a
origem da transformação 67% da largura à direita do lado esquerdo do elemento e 40% da altura do elemento
abaixo do lado superior do elemento. A Figura 22 ilustra alguns cálculos de origem.

26 | Transformações
Machine Translated by Google

Figura 22. Vários cálculos de origem

Tudo bem, então se você mudar a origem, o que acontece? A maneira mais fácil de visualizar
isso é com rotações 2D. Suponha que você gire um elemento 45 graus para a direita. A sua
colocação final dependerá da sua origem. A Figura 23 ilustra os efeitos de várias origens de
transformadas diferentes; em cada caso, a origem da transformação é marcada com um círculo.

Mais Propriedades de Transformação | 27

Machine Translated by Google

Figura 23. Os efeitos rotacionais do uso de várias origens de transformação

A origem é importante para outros tipos de transformação, como distorções e escalas. Dimensionar
um elemento com sua origem no centro puxará todos os lados igualmente, enquanto dimensionar um
elemento com origem no canto inferior direito fará com que ele encolha em direção a esse canto. Da
mesma forma, inclinar um elemento em relação ao seu centro resultará na mesma forma como se
estivesse inclinado em relação ao canto superior direito, mas o posicionamento da forma será
diferente. Alguns exemplos são mostrados na Figura 24; novamente, cada origem de transformação
é marcada com um círculo.

O único tipo de transformação que não é realmente afetado pela alteração da origem da transformação
é a tradução. Se você empurrar um elemento com translate(), ou seus primos como translateX() e
translateY(), ele terminará no mesmo lugar, independentemente de onde a origem da transformação
esteja localizada. Se essa é toda a transformação que você planeja fazer, definir a origem da
transformação é irrelevante. Se você fizer qualquer coisa além de traduzir, porém, a origem será
importante. Use-o com sabedoria.

28 | Transformações
Machine Translated by Google

Figura 24. Os efeitos de distorção do uso de várias origens de transformação

Escolhendo um estilo 3D
Se você estiver configurando elementos para serem transformados em três dimensões, usando, digamos,
translate3d() ou rotateY()—você provavelmente espera que os elementos estejam presentes
ted como se estivessem em um espaço 3D. E, no entanto, esse não é o comportamento padrão. Por
padrão, tudo parece plano, não importa o que você faça. Felizmente, isso pode ser substituído
den com a propriedade transform-style .

estilo de transformação

Valores: apartamento | preservar-3d

Valor inicial: apartamento

Aplica-se a: Qualquer elemento transformável

Herdado: Não

Valor calculado: conforme especificado

Mais Propriedades de Transformação | 29

Machine Translated by Google

Suponha que você tenha um elemento que deseja mover “para mais perto” de seu olho e, em seguida,
incline um pouco, com uma quantidade moderada de perspectiva. Algo como esta regra, aplicada ao
seguinte HTML:

div#inner {transform: perspective(750px) translateZ(60px) rotateX(45deg);}

<div id="outer">
exterior
<div id="inner">interno</div>
</div>
Então você faz isso e obtém o resultado mostrado na Figura 25; mais ou menos o que você esperava.

Figura 25. Uma div interna transformada em 3D

Mas então você decide girar o div externo para um lado e, de repente, nada mais faz sentido. A div interna
não está onde você imaginou. Na verdade, parece apenas uma imagem colada na frente da div externa.

Bem, é exatamente isso, porque o valor padrão de transform-style é flat.

O div interno foi desenhado em seu estado movido para frente e inclinado para trás, e isso foi aplicado à
frente do div externo como se fosse uma imagem. Então, quando você girou a div externa , a imagem plana
girou junto com ela, conforme mostrado na Figura 26:

div#outer {transform: perspectiva(750px) girarY(60deg) girarX(-20deg);} div#inner

{transform: perspective(750px) translateZ(60px) girarX(45deg);}

30 | Transformações
Machine Translated by Google

Figura 26. Os efeitos de um estilo de transformação plana

Altere o valor para preserve-3d, no entanto, e as coisas são repentinamente diferentes. A div interna será
desenhada como um objeto 3D completo em relação a sua div externa pai, flutuando no espaço próximo, e não
como uma imagem colada na frente da div externa. Você pode ver os resultados dessa mudança na Figura 27:

div#outer {transform: perspectiva(750px) girarY(60deg) girarX(-20deg); transform-

style: preserve-3d;} div#inner {transform: perspective(750px) translateZ(60px)
rotateX(45deg);}

Figura 27. Os efeitos de um estilo de transformação preservado em 3D

Um aspecto importante do estilo de transformação é que ele pode ser substituído por outras propriedades. A
razão é que alguns valores dessas outras propriedades requerem uma apresentação achatada de um elemento
e seus filhos para funcionar. Nesses casos, o valor de transform-style é forçado a ser plano, independentemente

do que você possa ter declarado.

Mais Propriedades de Transformação | 31

Machine Translated by Google

Portanto, para evitar esse comportamento de substituição, certifique-se de que as seguintes propriedades estejam
definidas para os valores listados:

• estouro: visível

• filtro: nenhum

• clipe: automático

• caminho de clipe: nenhum

• imagem de máscara: nenhuma

• mask-border-source: nenhum

• modo mix-blend: normal

Esses são todos os valores padrão para essas propriedades, desde que você não tente alterar nenhum deles
para seus elementos 3D preservados, tudo bem! Mas se você achar que editar algum CSS de repente achata
suas lindas transformações 3D, uma dessas propriedades pode ser a culpada.

Mais uma observação: além dos valores mencionados, o valor do isolamento da propriedade deve ser, ou ser
calculado para ser, isolado. (isolamento é uma propriedade de composição, caso você esteja se perguntando.)

Alterando a Perspectiva Na

verdade, existem duas propriedades que são usadas para definir como a perspectiva é tratada: uma para definir
a distância da perspectiva, como com a função perspective() discutida em uma seção anterior; e outro para
definir o ponto de origem da perspectiva.

Definindo uma perspectiva de

grupo Primeiro, vamos considerar a perspectiva de propriedade, que aceita um comprimento que define a
profundidade da pirâmide de perspectiva. À primeira vista, parece com a função perspective() discutida
anteriormente, mas existem algumas diferenças muito críticas.

32 | Transformações
Machine Translated by Google

perspectiva

Valores: nenhum | <comprimento>

Valor inicial: apartamento

Aplica-se a: Qualquer elemento transformável

Herdado: Não

Valor calculado: O comprimento absoluto, ou então nenhum

Como um exemplo rápido, se você quiser criar uma perspectiva muito profunda, imitando os
resultados que você obteria de uma lente de zoom, você pode declarar algo como perspectiva:
2500px. Para uma profundidade rasa, que imita um efeito de lente olho de peixe closeup, você
pode declarar perspectiva: 200px.

Então, como isso difere da função perspective() ? Quando você usa perspective(), você está
definindo o efeito de perspectiva para o elemento que recebe essa função. Então, se você
disser transform: perspective(800px) rotateY(-50grad);, você está aplicando essa perspectiva
a cada elemento que tem a regra aplicada.

Com a propriedade perspective , por outro lado, você está criando uma profundidade de
perspectiva que é aplicada a todos os elementos filho do elemento que recebeu a propriedade.
Confuso ainda? Não seja. Aqui está uma ilustração simples da diferença, conforme mostrado
na Figura 28:

div {transform-style: preserve-3d; borda: cinza sólido de 1px ; largura: 660px;} img
{margem: 10px;} #one {perspective: none;} #one img {transform: perspective(800px)
rotateX(-50grad);} #two {perspective: 800px;} #two img {transform : girarX(-50grad);}

<div><img src="rsq.gif"><img src="rsq.gif"><img src="rsq.gif"></div> <div

id="one"><img src=" rsq.gif"><img src="rsq.gif"><img src="rsq.gif"></div> <div id="two"><img
src="rsq.gif"><img src ="rsq.gif"><img src="rsq.gif"></div>

Mais Propriedades de Transformação | 33

Machine Translated by Google

Figura 28. Perspectiva compartilhada versus perspectivas individuais

Na Figura 28, vemos primeiro uma linha de imagens que não foram transformadas. Na segunda linha,
cada imagem foi girada 50 gradianos (equivalente a 45 graus) em nossa direção, mas cada uma dentro
de sua própria perspectiva individual.

Na terceira linha de imagens, nenhuma delas tem uma perspectiva individual. Em vez disso, todos são
desenhados dentro da perspectiva definida pela perspectiva: 800px; que foi definido no div que os
contém. Como todos operam dentro de uma perspectiva compartilhada, parecem “corretos”; isto é,
como seria de esperar se tivéssemos três imagens físicas montadas em uma folha de vidro transparente
e giradas em nossa direção em torno do eixo horizontal central desse vidro.

34 | Transformações
Machine Translated by Google

Observe que a presença de transform-style: preserve-3d torna esse

efeito possível, conforme discutido na seção anterior.

Esta é a diferença crítica entre perspectiva, a propriedade; e perspectiva(), a função. O

primeiro cria um espaço 3D compartilhado por todos os seus filhos. Este último afeta apenas
o elemento ao qual é aplicado. Uma diferença menos importante é que a função perspective()
precisa vir primeiro ou no início de sua cadeia de transformações para ser aplicada ao
elemento conforme ele é transformado no espaço 3D. A propriedade perspectiva , por outro
lado, é aplicada a todos os filhos, independentemente de onde suas transformações são
declaradas.

Na maioria dos casos, você usará a propriedade perspective em vez da função perspective() .
Na verdade, divs de contêiner (ou outros elementos) são um recurso muito comum de
transformações 3D – do jeito que costumavam ser para layout de página – em grande parte
para estabelecer uma perspectiva compartilhada. No exemplo anterior, o <div id="two">
estava lá apenas para servir como um contêiner de perspectiva, por assim dizer. Por outro
lado, não poderíamos ter feito o que fizemos sem ele.

Movendo a origem da
perspectiva Ao transformar elementos em três dimensões - supondo que você tenha
permitido que eles apareçam em três dimensões, uma perspectiva será usada. (Consulte
transform-style e perspective, respectivamente, nas seções anteriores.) Essa perspectiva
terá uma origem, que também é conhecida como ponto de fuga, e você pode alterar sua
localização com a propriedade perspective-origin.

Mais Propriedades de Transformação | 35

Machine Translated by Google

perspectiva-origem

Valores: [esquerda | centro | direito | topo | inferior | <porcentagem> | <comprimento> ] |

[esquerda | centro | direito | <porcentagem> | <comprimento> ]

[ topo | centro | inferior | <porcentagem> | <comprimento> ] <comprimento>?
|
[centro | [esquerda | direita ] ] && [ centro | [ topo | fundo ] ]

Valor inicial:
50% 50%

Aplica-se a: Qualquer elemento transformável

Herdado: Não

Porcentagens: Consulte o tamanho da caixa delimitadora (consulte a explicação)

Valor calculado: uma porcentagem, exceto para valores de comprimento, que são convertidos em um comprimento absoluto

Como você sem dúvida viu, perspective-origin e transform-origin (discutidos anteriormente) têm a mesma
sintaxe de valor, permitindo um valor de comprimento opcional definindo um deslocamento ao longo do
eixo z. Embora a forma como os valores são expressos seja idêntica, os efeitos que eles têm são muito
diferentes. Com transform-origin, você define o ponto em torno do qual as transformações acontecem.
Com a origem da perspectiva, você define o ponto em que as linhas de visão convergem.

Tal como acontece com a maioria das propriedades de transformação 3D, isso é mais facilmente
demonstrado do que descrito. Considere o seguinte CSS e marcação, ilustrados na Figura 29:

#container {perspectiva: 850px; perspectiva-origem: 50% 0%;} #ruler

{altura: 50px; background: #DED url(tick.gif) repeat-x;
transform: girarX(60deg);
origem de transformação: 50% 100%;}

<div id="container">
<div id="ruler"></div> </
div>

Figura 29. Uma “régua” básica

36 | Transformações
Machine Translated by Google

O que temos é uma imagem de fundo repetida de marcas de escala em uma régua, com a
div que as contém afastada de nós em 60 graus. Todas as linhas apontam para um ponto
de fuga comum, o centro superior da div do contêiner (por causa do valor de 50% 0% para
a origem da perspectiva).

Agora considere essa mesma configuração com várias origens de perspectiva, como mostrado na Fig .
30.

Figura 30. Uma “régua” básica com diferentes origens de perspectiva

Como você pode ver, mover a origem da perspectiva altera a renderização do elemento
3D transformado.

Observe que isso só teve efeito porque fornecemos um valor para a perspectiva. Se o valor
da perspectiva for o default none, então qualquer valor dado para a origem da perspectiva
será ignorado. Isso faz sentido, já que você não pode ter uma origem de perspectiva quando
não há nenhuma perspectiva!

Lidando com Backfaces

Algo em que você provavelmente nunca pensou, ao longo de todos os anos em que você
vem desenhando elementos, foi: como seria se eu pudesse ver a parte de trás do elemento?
Agora que as transformações 3D são uma possibilidade, pode muito bem chegar um dia
em que você veja a parte de trás de um elemento. Você pode até querer fazer isso intencionalmente.
O que acontece naquele momento é determinado pela visibilidade da face posterior da propriedade.

Mais Propriedades de Transformação | 37

Machine Translated by Google

backface-visibility

Valores:
visível | escondido

Valor inicial:
visível

Aplica-se a: Qualquer elemento transformável

Herdado: Não

Valor calculado: conforme especificado

Ao contrário de muitas outras propriedades e funções sobre as quais já falamos, esta é o mais
direta possível. Tudo o que ele faz é determinar se o verso de um elemento é renderizado quando
está voltado para o visualizador ou não. É realmente simples assim.

Então, digamos que você vire dois elementos, um com backface-visibility definido como o valor
padrão de visible e o outro definido como oculto. Você obtém o resultado mostrado na Figura 31:

span {borda: 1px vermelho sólido; display: inline-block;} img

{vertical-align: bottom;} img.flip {transform: girarX(180deg);
display: inline-block;} img#show {backface-visibility: visible;} img#hide
{backface-visibility: hidden;}

<span><img src="salmon.gif"> <span><img

src="salmon.gif" class="flip" id="show"> <span><img src ="salmon.gif"
class="flip" id="hide">

Figura 31. Faces traseiras visíveis e ocultas

38 | Transformações
Machine Translated by Google

Como você pode ver, a primeira imagem não foi alterada. O segundo é virado em torno de seu
eixo x, então o vemos de trás. O terceiro também foi invertido, mas não podemos vê-lo porque
sua face posterior foi ocultada.

Esta propriedade pode ser útil em várias situações. O mais simples é um caso em que você
tem dois elementos que representam os dois lados de um elemento de interface do usuário que
vira; digamos, uma área de pesquisa com configurações de preferência no verso ou uma foto
com algumas informações no verso. Tomemos o último caso. O CSS e a marcação podem ser
algo assim:
seção {posição: relativa;} img, div
{posição: absoluta; topo: 0; esquerda: 0; backface-visibility: hidden;} div {transform:
girarY(180deg);} section:hover {transform: girarY(180deg); transform-style: preserve-3d;}

<section>
<img src="photo.jpg" alt=""> <div
class="info">(…info vai aqui…)</div> </section>

Na verdade, este exemplo mostra que usar backface-visibility não é tão simples quanto parece.
Não é que a propriedade em si seja complicada, mas se você esquecer de definir transform-
style para preserve-3d, ela não funcionará conforme o esperado. É por isso que transform-style
é definido no elemento section .

Há uma variante deste exemplo que usa a mesma marcação, mas um CSS ligeiramente
diferente para mostrar a face posterior da imagem quando ela é virada. Isso provavelmente é
mais o que se pretendia, pois faz com que as informações pareçam estar literalmente escritas
no verso da imagem. Isso leva ao resultado final mostrado na Figura 32:
seção {posição: relativa;} img, div
{posição: absoluta; topo: 0; esquerda: 0;} div {transform:
girarY(180deg); backface-visibility: oculto; background:
rgba(255,255,255,0,85);}
section:hover {transform: girarY(180deg); transform-style: preserve-3d;}

Mais Propriedades de Transformação | 39

Machine Translated by Google

Figura 32. Foto na frente, informações no verso

A única coisa que tivemos que fazer para que isso acontecesse foi apenas mudar a
visibilidade do backface: oculto para o div em vez de aplicá-lo tanto ao img quanto ao div.
Assim, o backface do div fica oculto quando é invertido, mas o da imagem não.

Resumo
Com a capacidade de transformar elementos em espaços bi e tridimensionais, as
transformações CSS fornecem muito poder aos designers que procuram novas maneiras de
apresentar informações. Desde a criação de combinações interessantes de transformações
2D até a criação de uma interface totalmente em 3D, as transformações abrem uma grande
quantidade de novos territórios no espaço de design. Existem algumas dependências
interessantes entre propriedades, o que é algo que nem todo autor de CSS achará natural no
começo, mas elas se tornam uma segunda natureza com um pouco de prática.

40 | Transformações
Machine Translated by Google

Sobre o autor
Eric A. Meyer trabalha com a Web desde o final de 1993 e é um especialista reconhecido
internacionalmente nos assuntos de HTML, CSS e padrões da Web. Um autor amplamente lido,
ele também é o fundador da Complex Spiral Consulting, que conta entre seus clientes a America
Online; Apple Computer, Inc.; Banco Wells Fargo; e Macromedia, que descreveu Eric como “um
parceiro crítico em nossos esforços para transformar o Macromedia Dreamweaver MX 2004 em
uma ferramenta revolucionária para design baseado em CSS”.

A partir do início de 1994, Eric foi o designer visual e coordenador da web do campus para o site
da Case Western Reserve University, onde também escreveu uma série amplamente aclamada
de três tutoriais HTML e foi coordenador do projeto para a versão online da Encyclopedia of
Cleveland History e do Dicionário de Biograÿa de Cleveland, a primeira enciclopédia de história
urbana publicada completa e gratuitamente na Web.

Autor de Eric Meyer sobre CSS e mais Eric Meyer sobre CSS (New Riders), CSS: The De nitive
Guide (O'Reilly) e CSS2.0 Programmer's Reference (Osborne/McGraw Hill), bem como vários
artigos para a O'Reilly Network, Web Techniques e Web Review, Eric também criou os CSS
Browser Compatibility Charts e coordenou a autoria e criação do CSS Test Suite oficial do W3C.
Ele lecionou para uma ampla variedade de organizações, incluindo o Laboratório Nacional de Los
Alamos, a Biblioteca Pública de Nova York, a Universidade Cornell e a Universidade do Norte de
Iowa. Eric também fez palestras e apresentações técnicas em várias conferências, entre elas An
Event Apart (que ele cofundou), a série IW3C2 WWW, Web Design World, CMP, SXSW, a série
de conferências User Interface e The Other Dreamweaver Conference.

Em seu tempo pessoal, Eric atua como chaperone de lista da lista de discussão css-discuss
altamente ativa , que ele cofundou com John Allsopp da Western Civilisation, e que agora é
apoiado por evolt.org. Eric mora em Cleveland, Ohio, que é uma cidade muito melhor do que você
foi levado a acreditar. Por nove anos ele foi o apresentador do “Your Father's Oldsmobile”, um
programa de rádio de banda grande ouvido semanalmente na WRUW 91.1 FM em Cleveland.

Você pode encontrar informações mais detalhadas na página pessoal de Eric.

Colofão
Os animais na capa do Transforms in CSS são salmões (salmonidae), que é uma família de
peixes composta por muitas espécies diferentes. Dois dos salmões mais comuns são o salmão
do Pacífico e o salmão do Atlântico.

O salmão do Pacífico vive no norte do Oceano Pacífico, nas costas da América do Norte e da
Ásia. Existem cinco subespécies de salmão do Pacífico, com um peso médio de 10 a 30 libras. O
salmão do Pacífico nasce no outono em leitos de cascalho de córregos de água doce, onde
Machine Translated by Google

eles incubam durante o inverno e emergem como peixes de uma polegada de comprimento. Eles
vivem por um ano ou dois em riachos ou lagos e depois seguem rio abaixo para o oceano. Lá eles
vivem por alguns anos, antes de voltarem rio acima para seu local exato de nascimento para desovar
e depois morrer.

O salmão do Atlântico vive no norte do Oceano Atlântico, nas costas da América do Norte e da
Europa. Existem muitas subespécies de salmão do Atlântico, incluindo a truta e o char. Seu peso
médio é de 10 a 20 quilos. A família do salmão do Atlântico tem um ciclo de vida semelhante ao de
seus primos do Pacífico e também viaja de leitos de cascalho de água doce para o mar. Uma grande
diferença entre os dois, no entanto, é que o salmão do Atlântico não morre após a desova; ele pode
retornar ao oceano e depois retornar ao riacho para desovar novamente, geralmente duas ou três
vezes.

O salmão, em geral, é um peixe gracioso, prateado, com manchas nas costas e nas barbatanas.
Sua dieta consiste em plâncton, larvas de insetos, camarões e peixes menores. Acredita-se que seu
olfato incomumente aguçado os ajude a navegar do oceano de volta ao local exato de seu nascimento,
passando rio acima por muitos obstáculos. Algumas espécies de salmão permanecem sem litoral,
vivendo toda a sua vida em água doce.

O salmão é uma parte importante do ecossistema, pois seus corpos em decomposição fornecem
fertilizante para os leitos dos rios. Seus números foram diminuindo ao longo dos anos, no entanto.
Fatores no declínio da população de salmão incluem a destruição do habitat, pesca, barragens que
bloqueiam os caminhos de desova, chuva ácida, secas, inundações e poluição.

A imagem da capa é uma gravura do século XIX do Dover Pictorial Archive. As fontes da capa são
URW Typewriter e Guardian Sans. A fonte do texto é Adobe Minion Pro; a fonte do título é Adobe
Myriad Condensed; e a fonte do código é Ubuntu Mono da Dalton Maag.