From 9bf6693b2edd5281c1577856895c55653a41dc01 Mon Sep 17 00:00:00 2001 From: MDN Date: Sat, 19 Mar 2022 00:13:08 +0000 Subject: [CRON] sync translated content --- .../css/transform-function/perspective/index.html | 124 +++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 files/pt-br/web/css/transform-function/perspective/index.html (limited to 'files/pt-br/web/css/transform-function/perspective/index.html') diff --git a/files/pt-br/web/css/transform-function/perspective/index.html b/files/pt-br/web/css/transform-function/perspective/index.html new file mode 100644 index 0000000000..05b62476e6 --- /dev/null +++ b/files/pt-br/web/css/transform-function/perspective/index.html @@ -0,0 +1,124 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective +tags: + - Função CSS + - Referencia + - Transformações CSS +translation_of: Web/CSS/transform-function/perspective() +original_slug: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

A função CSS perspective() define uma transformação que configura a distância entre o usuário e o plano z=0. Seu resultado é um dado do tipo {{cssxref("<transform-function>")}}.

+ +

Sintaxe

+ +

A distância de perspectiva usada porperspective() é especificada por um valor {{cssxref("<length>")}}, que representa a distância entre o usuário e o plano z=0. Um valor positivo faz o elemento parecer mais perto do usuário, e um valor negativo o faz parecer mais longe.

+ +
perspective(d)
+
+ +

Valores

+ +
+
d
+
É um {{cssxref("<length>")}} representando a distância do usuário até o plano z=0. Se for 0 ou um valor negativo, nenhuma transformação de perspectiva é aplicada.
+
+ + + + + + + + + + + + + + + + + +
Coordenadas cartesianas em ℝ2Coordenadas homogêneas em ℝℙ2Coordenadas cartesianas em ℝ3Coordenadas homogêneas em ℝℙ3
+

Essa transformação se aplica ao espaço 3D e não pode ser representada no plano.

+ 		Essa não é uma transformação linear em ℝ3, e não pode ser representada usando uma matriz de coordenadas cartesianas. 10000100001000−1/d1
+ +

Exemplos

+ +

HTML

+ +
<p>Sem perspectiva:</p>
+<div class="no-perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Com perspectiva (7.5cm):</p>
+<div class="perspective-box">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+.no-perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.perspective-box {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  transform: perspective(7.5cm) rotateX(-15deg) rotateY(15deg);
+  margin-left: 100px;
+}
+
+.top {
+  background-color: skyblue;
+  transform: rotateX(90deg) translate3d(0, 0, 50px);
+}
+
+.left {
+  background-color: pink;
+  transform: rotateY(-90deg) translate3d(0, 0, 50px);
+}
+
+.front {
+  background-color: limegreen;
+  transform: translate3d(0, 0, 50px);
+}
+
+ +

Resultado

+ +

{{ EmbedLiveSample('Examples', '250', '350') }}

+ +

Compatibilidade com navegadores

+ +

Veja o tipo de dado <transform-function> para informações de compatibilidade.

+ +

Ver também

+ + -- cgit v1.2.3-54-g00ecf