Heim > Artikel > Web-Frontend > Video-Tutorial zu CSS3-3D-Spezialeffekten

Video-Tutorial zu CSS3-3D-Spezialeffekten

炎欲天舞Original: 2017-08-24 11:27:391828Durchsuche

Kurseinführung:

Übergang

1: Übergang in CSS3

2: Übergangsattribut in CSS3

3: Analyse des Übergangseffekts in CSS3

4: Fünf Übergangseffekte in CSS3

Übungsfragen

1: Erstellen Sie eine 3D-Szene

2: Erstellen Sie eine 3D-Szene

3: Tatsächliche Erstellung einer 3D-Szene

4: Attribut übersetzen

5: Attribut transformieren

Übungsfragen

1: 3D-Animationseffekt erstellen

2: 3D-Animationseffektstruktur erstellen Teil

3: JS-Teil

4: Übungsfragen

5: Programmierherausforderung

Spieladresse: http://www.php.cn/course/416.html

Eigenschaften des Dozenten: klar Denken; Bild der Erklärung; Der Klang ist klar und deutlich;

Schwierigkeitsanalyse: Da viele der neuesten Attribute verwendet werden, müssen Sie auf Browserkompatibilitätsprobleme achten, darauf achten, den Browser häufig zu wechseln und die Kompatibilität zu ändern.

Kursunterlagen herunterladen: http://www.php.cn/xiazai/code/2080

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link href="css.css" rel="stylesheet" type="text/css">
    <script src="js.js"></script>
  </head>
  <body>
    <div id="wrapper">
      <div id="cube">
        <div class="face" id="face1">1</div>
        <div class="face" id="face2">2</div>
        <div class="face" id="face3">3</div>
        <div class="face" id="face4">4</div>
        <div class="face" id="face5">5</div>
        <div class="face" id="face6">6</div>
      </div>
    </div>
    <div id="op">
      <p>rotate x: <span id="deg-x">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatex" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate y: <span id="deg-y">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatey" value="0" class="range-control"
      oninput="rotate()"/><br/>
      <p>rotate z: <span id="deg-z">0</span> deg</p>
      <input type="range" min="-360" max="360" id="rotatez" value="0" class="range-control"
      oninput="rotate()"/><br/>
    </div>
  </body>
</html>

css

#wrapper {
  -webkit-perspective: 800;
  -webkit-perspective-origin: 50% 50%;
}
#cube {
  width: 200px;
  height: 200px;
  margin: 100px auto;
  -webkit-transform-style: preserve-3d;
}
.face {
  width: 200px;
  height: 200px;
  position: absolute;
  margin: 0 auto;
  background-color: rgba(0,0,0,0.5);
  font-size: 200px;
  text-align: center;
  line-height: 200px;
  font-weight: 900;
  color: #fff;
}
#face1 {
}
#face2 {
  -webkit-transform-origin: right;
  -webkit-transform: rotateY(-90deg);
}
#face3 {
  -webkit-transform-origin: left;
  -webkit-transform: rotateY(90deg);
}
#face4 {
  -webkit-transform: translateZ(-200px);
}
#face5 {
  -webkit-transform-origin: top;
  -webkit-transform: rotateX(-90deg);
}
#face6 {
  -webkit-transform-origin: bottom;
  -webkit-transform: rotateX(90deg);
}
#op{
  margin:0 auto;
  font-size:16px;
  font-weight:bold;
  width:800px;
}
#op .range-control{width:721px;}

function rotate() {
   var x = document.getElementById("rotatex").value;
   var y = document.getElementById("rotatey").value;
   var z = document.getElementById("rotatez").value;
    document.getElementById(&#39;cube&#39;).style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
   document.getElementById(&#39;deg-x&#39;).innerText = x;
   document.getElementById(&#39;deg-y&#39;).innerText = y;
   document.getElementById(&#39;deg-z&#39;).innerText = z;
 }

Das obige ist der detaillierte Inhalt vonVideo-Tutorial zu CSS3-3D-Spezialeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detailliertes Beispiel eines Fortschrittsbalkens, der eine kreisförmige Form implementiert und einen Prozentsatz in HTML5 Canvas anzeigtNächster Artikel：Detailliertes Beispiel eines Fortschrittsbalkens, der eine kreisförmige Form implementiert und einen Prozentsatz in HTML5 Canvas anzeigt

In Verbindung stehende Artikel

Mehr sehen