Heim > Artikel > Web-Frontend > Kann CSS3 3D-Effekte erzeugen?
Kann CSS3 3D-Effekte erzeugen?
- WBOYOriginal
- 2022-06-15 17:50:121521Durchsuche
css3 kann 3D-Effekte erzeugen. Methode: 1. Verwenden Sie die Methode „rotateX()“, mit der Sie festlegen können, dass das Element um einen bestimmten Grad um die ;}"; 2. Verwenden Sie die Methode „rotateY( )“, mit der Sie festlegen können, dass das Element um einen bestimmten Grad um die Y-Achse gedreht wird. Die Syntax lautet „Element {transform: rotierenY (um die Anzahl von um die Y-Achse drehen“. Grad);}".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
css3 für 3D-Effekte
CSS3 ermöglicht Ihnen die Verwendung von 3D-Transformationen zum Formatieren von Elementen.
3D-Konvertierungsmethode:
rotateX()
rotateX()-Methode, dreht ein Element um seine X-Achse um einen bestimmten Grad.
Beispiel ist wie folgt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateX 方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Ausgabeergebnis:
rotateY()
rotateY()-Methode, dreht ein Element um seine Y-Achse um einen bestimmten Grad.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 (以及更早版本的浏览器) 和 Opera 不支持 rotateY方法.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>Ausgabeergebnis:
(Freigabe von Lernvideos: CSS-Video-Tutorial, HTML-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonKann CSS3 3D-Effekte erzeugen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!