Partagez un exemple de méthode de définition de la distance de transformation 3D à l'aide de l'attribut perspective de CSS3

L'attribut perspective et l'attribut perspective-origin associé sont utilisés pour contrôler la distance sur l'axe des coordonnées dans l'espace graphique 3D. Ci-dessous, nous partagerons un exemple de méthode de définition de la distance de transformation 3D à l'aide de l'attribut perspective de CSS3. Bien sûr, nous en reparlerons également plus tard. Utilisation de perspective-origin :

L'attribut perspective est crucial pour la déformation 3D. Cette propriété définit la position du spectateur et mappe le contenu visuel sur un tronc de vue, qui à son tour le projette sur un plan de vue 2D. Si vous ne spécifiez pas de perspective, tous les points de l'espace Z seront disposés en mosaïque dans le même plan de vue 2D et il n'y aura aucun concept de profondeur de champ dans les résultats de la transformation.

La description ci-dessus peut être difficile à comprendre. En fait, pour l'attribut perspective, nous pouvons simplement le comprendre comme la distance de visualisation, qui est utilisée pour définir la distance entre l'utilisateur et le plan Z de l'élément. Espace 3D. Son effet est déterminé par sa valeur. Plus la valeur est petite, plus l'utilisateur est proche du plan Z de l'espace 3D, et l'effet visuel est plus impressionnant, à l'inverse, plus la valeur est grande, plus l'utilisateur est éloigné du plan Z ; plan de l'espace 3D, et l'effet visuel est plus impressionnant. Il est très petit.

Dans les déformations 3D, pour certaines déformations, comme la déformation le long de l'axe Z démontrée dans l'exemple ci-dessous, l'attribut perspective est indispensable pour voir l'effet de la déformation.

Regardons d'abord un exemple simple pour créer un effet de rotation 3D de cartes à jouer, et l'un ajoute une perspective de distance de vue à l'élément parent des cartes à jouer, tandis que l'autre ne la définit pas :

HTML

<p>
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
</p>
<p>
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
</p>

CSS

p {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
p img {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    margin-left: -71px;   
    margin-top: -100px;    
    transform-origin: bottombottom;   
}   
p img:nth-child(1){   
    opacity: .5;   
    z-index: 1;   
}   
p img:nth-child(2){   
    z-index: 2;   
    transform: rotateX(45deg);   
}   
p:nth-of-type(2){   
    perspective: 500px;   
}

L'effet est le suivant :

Photo ci-dessus L'effet parle de lui-même. Lorsque le nœud parent ne définit pas la perspective, l'effet de rotation 3D du Plum Blossom King n'est pas évident. Cependant, une fois que le nœud parent a défini la perspective, le Plum Blossom King ressemble à une rotation 3D.

L'exemple ci-dessus montre simplement comment utiliser la perspective. Revenons en arrière et regardons la syntaxe d'utilisation de la perspective :

perspective：none | <length>

L'attribut perspective comprend deux attributs : aucun et une valeur de longueur avec des unités. La valeur par défaut de l'attribut perspective est aucune, ce qui signifie que l'objet 3D est vu sous des angles infinis, mais qu'il semble plat. Une autre valeur, , accepte une valeur dont les unités de longueur sont supérieures à 0. Et son unité ne peut pas être une valeur en pourcentage. Plus la valeur est grande, plus l'angle apparaît loin, créant une intensité plutôt faible et très peu de changement dans l'espace 3D. A l’inverse, plus cette valeur est petite, plus l’angle apparaît proche, créant un angle fort et une grande variation 3D.

Par exemple, si vous vous tenez à 10 pieds et 1000 pieds et que vous regardez un cube de 10 pieds. À 10 pieds, vous êtes de la même taille du cube. Le changement de perspective est donc bien plus important que si vous vous teniez à 1 000 pieds, et la taille du solide est un centième de la distance qui vous sépare du cube. La même réflexion s'applique à la valeur Regardons un exemple pour améliorer notre compréhension de cet aspect :

HTML

<p class="wrapper w2">
    <p class="cube">
        <p class="side  front">1</p>
        <p class="side   back">6</p>
        <p class="side  right">4</p>
        <p class="side   left">3</p>
        <p class="side    top">5</p>
        <p class="side bottom">2</p>
    </p>
</p>
<p class="wrapper w1">
    <p class="cube">
        <p class="side  front">1</p>
        <p class="side   back">6</p>
        <p class="side  right">4</p>
        <p class="side   left">3</p>
        <p class="side    top">5</p>
        <p class="side bottom">2</p>
    </p>
</p>

CSS

.wrapper {   
    width: 50%;   
    float: left;   
}   
.cube {   
    font-size: 4em;   
    width: 2em;   
    margin: 1.5em auto;   
    transform-style: preserve-3d;   
    transform: rotateX(-40deg) rotateY(32deg);   
}   
.side {   
    position: absolute;   
    width: 2em;   
    height: 2em;   
    background: rgba(255, 99, 71, 0.6);   
    border: 1px solid rgba(0, 0, 0, 0.5);   
    color: white;   
    text-align: center;   
    line-height: 2em;   
}   
.front {   
    transform: translateZ(1em);   
}   
.top {   
    transform: rotateX(90deg) translateZ(1em);   
}   
.rightright {   
    transform: rotateY(90deg) translateZ(1em);   
}   
.left {   
    transform: rotateY(-90deg) translateZ(1em);   
}   
.bottombottom {   
    transform: rotateX(-90deg) translateZ(1em);   
}   

.back {   
    transform: rotateY(-180deg) translateZ(1em);   
}   
.w1 {   
    perspective: 100px;   
}   
.w2{   
    perspective: 1000px;   
}

L'effet est comme le montre la figure ci-dessous :

Sur la base de l'introduction ci-dessus, nous pouvons tirer une conclusion simple sur la valeur de la perspective :

1. L'effet la valeur de la perspective est aucune. Ou si elle n'est pas définie, il n'y aura pas de véritable espace 3D.
2. Plus la valeur de perspective est petite, plus l'effet 3D est évident, c'est-à-dire plus vos yeux sont proches de la vraie 3D.
3. La valeur de la perspective est infinie, ou la valeur est 0, ce qui a le même effet que la valeur aucune.
Afin de mieux comprendre l'attribut perspective, il nous est nécessaire de combiner sa relation avec translateZ. En fait, la valeur de la perspective peut également être simplement comprise comme la distance entre l'œil humain et le moniteur, et se traduit par la distance entre l'objet 3D et le point source. Ce qui suit est un diagramme du W3C pour expliquer la relation entre la perspective. et traduisezZ.

L'image ci-dessus montre le rapport de position de l'attribut perspective et de TranslateZ. En haut du diagramme, Z est la moitié de d, donc afin d'utiliser le cercle d'origine (contour) qui semble apparaître sur l'axe Z (cercle pointillé), le cercle plein sur la toile sera agrandi en deux parties, comme la lumière. cercle bleu. Comme le montre l'image du bas, le cercle est réduit de sorte que le cercle en pointillés apparaisse derrière le canevas et que la taille z soit égale à un tiers de sa position d'origine.

En déformation 3D, en plus de l'attribut perspective qui peut activer un espace 3D, la perspective() de la fonction de déformation 3D peut également activer l'espace 3D. La différence entre eux est la suivante : la perspective est utilisée sur l'élément de scène (l'élément parent commun des éléments déformés) perspective() est utilisée sur l'élément déformé actuel et peut être utilisée avec d'autres fonctions de transformation. Par exemple, on peut écrire :

.stage {   
    perspective: 600px
}

sous la forme :

.stage .box {   
    transform: perspective(600px);   
}

来看一个简单示例：

HTML

<p class="stage">
    <p class="container">
        <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    </p>
</p>
<p class="stage">
    <p class="container">
        <img src="images/cardKingClub.png" alt="" width="142"    style="max-width:90%" />
    </p>
</p>

CSS

.stage {   
    width: 500px;   
    height: 300px;   
    margin: 30px auto;   
    position: relative;   
    background: url(images/bg-grid.jpg) no-repeat center center;   
    background-size: 100% 100%;   
}   
.container {   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 142px;   
    height: 200px;   
    border: 1px dotted orange;   
    margin-left: -71px;   
    margin-top: -100px;    
}   
.container img{   
    transform: rotateY(45deg);   
}   
.stage:nth-child(1) .container{   
    perspective: 600px;   
}   
.stage:nth-child(2) img {   
    transform:perspective(600px) rotateY(45deg);   
}

效果如下所示：

上图效果可以看出，虽然书写的形式，属性名称不一致，但是效果却一样。

虽然perspective属性和perspective()函数所起的功能是一样的，但其取值以及以运用的对像有所不同：

1. perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；
2.perspective属性用于变形对像父元素；而perspective()函数用于变形对像自身，并和transform其他函数一起使用。

perspective-origin属性

perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。

perspective-origin属性的使用语法也很简单：

代码如下:

perspective-origin：[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]]

该属性的默认值为“50% 50%”(也就是center)，其也可以设置为一个值，也可以设置为两个长度值：

 第一个长度值指定相对于元素的包含框的X轴上的位置。它可以是长度值（以受支持的长度单位表示）、百分比或以下三个关键词之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）,或right（表示长度的100%）。
 第二个长度值指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一：top（表示在包含框的Y轴方向长度的0%），center（表示中间点），或bottom（表示长度的100%）。
注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置，如下图所示：

往往我们看一样东西不可能一直都在中心位置看，想换个角度，换个位置一看究竟，这个时候就离不开perspective-origin这个属性，下面来自于W3C官网的图可以简单阐述这一观点：

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!