Heim >Web-Frontend >CSS-Tutorial >Video-Tutorial zu CSS3-3D-Spezialeffekten
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: //m.sbmmt.com/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: //m.sbmmt.com/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;}js
function rotate() {
var x = document.getElementById("rotatex").value;
var y = document.getElementById("rotatey").value;
var z = document.getElementById("rotatez").value;
document.getElementById('cube').style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
document.getElementById('deg-x').innerText = x;
document.getElementById('deg-y').innerText = y;
document.getElementById('deg-z').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!