Teilen Sie eine Beispielmethode zum Festlegen des 3D-Transformationsabstands mithilfe des Perspektivattributs von CSS3

Das perspektivische Attribut und das zugehörige perspektivische Ursprungsattribut werden verwendet, um den Abstand auf der Koordinatenachse im 3D-Grafikraum zu steuern. Im Folgenden stellen wir Ihnen natürlich eine Beispielmethode zum Festlegen des 3D-Transformationsabstands vor , wir werden später auch darüber sprechen. Verwendung zum perspektivischen Ursprung:

Das perspektivische Attribut ist entscheidend für die 3D-Verformung. Diese Eigenschaft legt die Position des Betrachters fest und ordnet den visuellen Inhalt einem Ansichtskegel zu, der ihn wiederum auf eine 2D-Ansichtsebene projiziert. Wenn Sie keine Perspektive angeben, werden alle Punkte im Z-Raum in derselben 2D-Ansichtsebene gekachelt und in den Transformationsergebnissen gibt es kein Konzept der Schärfentiefe.

Die obige Beschreibung ist möglicherweise schwer zu verstehen. Tatsächlich können wir das Perspektivattribut einfach als Betrachtungsabstand verstehen, der zum Festlegen des Abstands zwischen dem Benutzer und der Z-Ebene des Elements verwendet wird 3D-Raum. Seine Wirkung wird durch seinen Wert bestimmt, je näher der Benutzer an der Z-Ebene des 3D-Raums ist, und umgekehrt ist der visuelle Effekt umso beeindruckender, je größer der Wert, desto weiter ist der Benutzer von der Z-Ebene entfernt Ebene des 3D-Raums, und der visuelle Effekt ist beeindruckender.

Bei 3D-Verformungen ist für einige Verformungen, wie z. B. die im Beispiel unten gezeigte Verformung entlang der Z-Achse, das Perspektivattribut wichtig, um die Auswirkung der Verformung zu erkennen.

Sehen wir uns zunächst ein einfaches Beispiel an, um einen 3D-Rotationseffekt von Spielkarten zu erzeugen, und eines fügt dem übergeordneten Element der Spielkarten eine Sichtentfernungsperspektive hinzu, während das andere es nicht festlegt:

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;   
}

Der Effekt ist wie folgt:

Bild oben: Die Wirkung spricht für sich. Wenn der übergeordnete Knoten die Perspektive nicht festlegt, ist der 3D-Rotationseffekt des Plum Blossom King nicht offensichtlich. Nachdem der übergeordnete Knoten jedoch die Perspektive festgelegt hat, sieht der Plum Blossom King wie eine 3D-Rotation aus.

Das obige Beispiel zeigt einfach, wie man die Perspektive verwendet. Schauen wir uns noch einmal die Syntax der Verwendung der Perspektive an:

perspective：none | <length>

Das Perspektive-Attribut enthält zwei Attribute: keine und ein Längenwert mit Einheiten. Der Standardwert des Perspektive-Attributs ist „None“, was bedeutet, dass das 3D-Objekt aus unendlich vielen Winkeln betrachtet wird, aber flach aussieht. Ein anderer Wert, , akzeptiert einen Wert mit Längeneinheiten größer als 0. Und seine Einheit kann kein Prozentwert sein. Je größer der Wert für , desto weiter erscheint der Winkel, wodurch eine eher geringe Intensität und eine sehr geringe Änderung im 3D-Raum entsteht. Umgekehrt gilt: Je kleiner dieser Wert, desto näher erscheint der Winkel, wodurch ein starker Winkel und eine große 3D-Variation entstehen.

Zum Beispiel, wenn Sie bei 10 Fuß und 1000 Fuß stehen und einen 10-Fuß-Würfel betrachten. Bei einer Entfernung von 10 Fuß sind Sie gleich groß vom Würfel entfernt. Der Perspektivwechsel ist also viel größer, als wenn Sie in einer Höhe von 1.000 Fuß stehen würden, und die Körpergröße beträgt ein Hundertstel der Entfernung, in der Sie sich vom Würfel befinden. Die gleiche Überlegung gilt für den -Wert der Perspektive. Schauen wir uns ein Beispiel an, um unser Verständnis dieses Aspekts zu verbessern:

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;   
}

Der Effekt ist wie in der folgenden Abbildung dargestellt:

Basierend auf der obigen Einführung können wir eine einfache Schlussfolgerung über den Wert der Perspektive ziehen:

1. Die Der Wert der Perspektive ist „None“. Wenn er nicht festgelegt ist, gibt es keinen echten 3D-Raum.
2. Je kleiner der Perspektivwert, desto deutlicher ist der 3D-Effekt, d. h. desto näher sind Ihre Augen am echten 3D.
3. Der Wert der Perspektive ist unendlich oder der Wert ist 0, was den gleichen Effekt hat wie der Wert keine.
Um das Perspektive-Attribut besser zu verstehen, ist es notwendig, dass wir seine Beziehung mit TranslateZ kombinieren. Tatsächlich kann der Wert der Perspektive auch einfach als der Abstand zwischen dem menschlichen Auge und der Anzeige verstanden werden, und übersetzt ist er der Abstand zwischen dem 3D-Objekt und dem Quellpunkt. Das Folgende ist ein Diagramm von W3C, um die Beziehung zwischen der Perspektive zu erklären und übersetzenZ.

Das obige Bild zeigt das Positionsverhältnis des Perspektive-Attributs und TranslateZ. Um die Abbildung zu übertreffen, ist Z ein halbes D. Um den ursprünglichen Kreis (Umriss) zu verwenden, der auf der Z-Achse zu erscheinen scheint (gestrichelter Kreis), wird der ausgefüllte Kreis auf der Leinwand wie das Hellblau in zwei Teile erweitert Kreis. Wie im unteren Bild gezeigt, wird der Kreis verkleinert, sodass der gestrichelte Kreis hinter der Leinwand erscheint und die Z-Größe ein Drittel seiner ursprünglichen Position beträgt.

Bei der 3D-Verformung kann zusätzlich zum Perspektivenattribut, das einen 3D-Raum aktivieren kann, auch die Perspektive() in der 3D-Verformungsfunktion den 3D-Raum aktivieren. Der Unterschied zwischen ihnen besteht darin, dass die Perspektive auf das Bühnenelement (das gemeinsame übergeordnete Element der deformierten Elemente) angewendet wird. perspective() wird auf das aktuelle deformierte Element angewendet und kann mit anderen Transformationsfunktionen verwendet werden. Zum Beispiel können wir schreiben:

.stage {   
    perspective: 600px
}

als:

.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官网的图可以简单阐述这一观点：

Das obige ist der detaillierte Inhalt vonTeilen Sie eine Beispielmethode zum Festlegen des 3D-Transformationsabstands mithilfe des Perspektivattributs von CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!