A perspective-originpropriedade determina a origem da perspectivepropriedade. Pense nisso como o ponto de fuga do atual espaço 3D.
Observe que a perspectivepropriedade perspective-origindeve ser definida no elemento pai para dar profundidade aos filhos transformados.
A perspective-originpropriedade não faz nada sozinha. Ele deve ser definido em um elemento junto com perspective.
/** * Syntax * perspective-origin: x-position * perspective-origin: x-position y-position * * perspective-origin:
| | constants | inherit */ .element1 ( perspective-origin: 25% 75%; ) .element2 ( perspective-origin: 10px 25px; ) .element3 ( perspective-origin: left bottom; ) Abaixo está uma demonstração que mostra como um cubo 3D se comporta ao alterar seu ponto de fuga, alterando o perspective-originvalor (constantes).
Ei, vamos animar a origem da perspectiva, apenas por diversão!
- Começa em `0% 0%` (canto superior esquerdo)
- Em seguida, vá para `100% 0%` (canto superior direito)
- Em seguida, para `100% 100%` (canto inferior direito)
- Em seguida, para `0% 100%` (canto inferior esquerdo)
- Em seguida, volte para 1. e reinicie
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 12 * | 10 * | 11 | 12 | 4 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 3,2 * |