Recomendação de curso:

Função perspective() do CSS

Definição e uso perspective() CSS

perspective() A função define a distância do usuário até o plano z=0. transform no uso do atributo.

Exemplo

Usando perspective() Adicione alguns efeitos de perspectiva aos dois cubos:

.cube1 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(5cm) rotateX(-15deg) rotateY(30deg);
}
.cube2 {
  font-size: 4em;
  width: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: perspective(10cm) rotateX(-15deg) rotateY(30deg);
}

Experimente você mesmo

Sintaxe do CSS

perspective(length|none)
Valor Descrição
length Obrigatório. Especifica a distância do usuário até o plano z=0. none indica que não há transformação.

Detalhes técnicos

Versão: Módulo de Transforms do CSS Level 2

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta plenamente a função.

Chrome Edge Firefox Safari Opera
perspective()
12 12 10 4 15
perspective(none)
97 97 93 15.4 83

Páginas relacionadas

Tutorial:Transformações 3D do CSS

Referência:A propriedade CSS transform

Referência:Função rotate() do CSS

Referência:Função rotate3d() do CSS

Referência:Função rotateX() do CSS

Referência:A função CSS rotateY()

Referência:A função CSS rotateZ()