From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../transform-function/perspective()/index.html | 159 +++++++++++++++++++++ 1 file changed, 159 insertions(+) create mode 100644 files/fr/web/css/transform-function/perspective()/index.html (limited to 'files/fr/web/css/transform-function/perspective()') diff --git a/files/fr/web/css/transform-function/perspective()/index.html b/files/fr/web/css/transform-function/perspective()/index.html new file mode 100644 index 0000000000..0fb86405b6 --- /dev/null +++ b/files/fr/web/css/transform-function/perspective()/index.html @@ -0,0 +1,159 @@ +--- +title: perspective() +slug: Web/CSS/transform-function/perspective() +tags: + - CSS + - Reference + - Transformations CSS +translation_of: Web/CSS/transform-function/perspective() +--- +
{{CSSRef}}
+ +

La fonction perspective() définit la distance entre le plan d'équation z = 0 et l'œil de l'utilisateur afin de fournir une perspective aux éléments positionnés dans l'espace (3D). Chaque élément pour lequel z est positif apparaîtra plus grand et chaque élément pour lequel z est négatif apparaîtra plus petit. La « force » de cet effet est déterminée par la valeur de cette propriété. La valeur obtenue comme résultat de cette fonction est de type {{cssxref("<transform-function>")}}.

+ +

Le résultat de cette fonction est une valeur de type {{cssxref("<transform-function>")}}.

+ +
{{EmbedInteractiveExample("pages/css/function-perspective.html")}}
+ + + +

La fonction de transformation perspective()s'applique à l'élément qu'on veut transformer. En revanche, les propriétés {{cssxref('perspective')}} et {{cssxref('perspective-origin')}} s'appliquent sur l'élément parent de l'enfant qu'on veut placer dans un espace 3D.

+ +

Syntaxe

+ +
perspective(l)
+
+ +

Valeurs

+ +
+
l
+
Une valeur de type {{cssxref("<length>")}} qui définit la distance entre l'œil de l'utilisateur et le plan décrit par l'équation z = 0. Si la valeur est nulle ou négative, aucune perspective ne sera appliquée.
+
+ + + + + + + + + + + + + + + + + +
Coordonnées cartésiennes sur ℝ2Coordonnées homogènes sur ℝℙ2Coordonnées cartésiennes sur ℝ3Coordonnées homogènes sur ℝℙ3
+

Cette transformation s'applique dans l'espace (3D) et ne peut pas être représentée en deux dimensions.

+ 		Une perspective n'est pas une transformation linéaire de ℝ3 et ne peut donc pas être représentée en utilisant une matrice du système cartésien. 10000100001000−1/d1
+ +

Exemples

+ +

Appliquer une perspective sur un objet 3D

+ +

CSS

+ +
.face {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+  font-size: 100px;
+  text-align: center;
+}
+
+p + div {
+  width: 100px;
+  height: 100px;
+  transform-style: preserve-3d;
+  margin-left: 100px;
+}
+.no-perspective-box {
+  transform: rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-far {
+  transform: perspective(9cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.perspective-box-closer {
+  transform: perspective(4cm) rotateX(-15deg) rotateY(30deg);
+}
+
+.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);
+}
+
+ +

HTML

+ +
<p>Sans perspective :</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>Avec une perspective (9cm) :</p>
+<div class="perspective-box-far">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+<p>Avec une perspective (4cm) :</p>
+<div class="perspective-box-closer">
+  <div class="face front">A</div>
+  <div class="face top">B</div>
+  <div class="face left">C</div>
+</div>
+
+ +

Résultat

+ +

{{EmbedLiveSample('Appliquer_une_perspective_sur_un_objet_3D', '100%', '350', '', 'Web/CSS/transform-function/perspective')}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName("CSS Transforms 2", "#funcdef-perspective", "perspective()")}}{{Spec2("CSS Transforms 2")}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.

+ +

Voir aussi

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