Einführung in die Verwendung des 3D-Rotationseffekts CSS3-CSS-Tutorial-php.cn

Einführung in die Verwendung des 3D-Rotationseffekts CSS3

不言

Freigeben： 2018-06-25 16:07:41

Original

2580 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich CSS3-3D-Rotationseffekte im Detail vorgestellt, die einen gewissen Referenzwert haben.

In diesem Artikel werden die Beispiele für CSS3-3D-Rotationseffekte mitgeteilt Ihre Referenz, der spezifische Inhalt ist wie folgt

Effektbild:

Beispielcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D旋转的Demo</title>
    <style>
        #experiment {     
            -webkit-perspective: 800;     
            -webkit-perspective-origin: 50% 50%;     
            -webkit-transform-style: -webkit-preserve-3d;     
        }     
        #block {     
            width: 200px;     
            height: 200px;     
            background-color: pink;     
            margin: 100px auto;     
            -webkit-transition: background-color 3s;     
        }     
        #block:hover {     
            background-color: purple;     
        }     
        #ep {     
            text-align: center;     
        }     
        #ep input {     
            width: 800px;     
        }     
    </style>
    <script>
        function rotate() {     
            var x = document.getElementById("rotateX").value;     
            var y = document.getElementById("rotateY").value;     
            var z = document.getElementById("rotateZ").value;     
            document.getElementById("block").style.webkitTransform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";     
            document.getElementById("degx-span").innerText = x;     
            document.getElementById("degy-span").innerText = y;     
            document.getElementById("degz-span").innerText = z;     
        }     
    </script>
</head>
<body>
    <p id="experiment">
        <p id="block"></p>
    </p>
    <p id="ep">
        <p>rotate x: <span id="degx-span">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotateX" value="0" class="range-control" onmousemove="rotate()"/><br/>
        <p>rotate y: <span id="degy-span">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotateY" value="0" class="range-control" onmousemove="rotate()"/><br/>
        <p>rotate z: <span id="degz-span">0</span>deg</p>
        <input type="range" min="-360" max="360" id="rotateZ" value="0" class="range-control" onmousemove="rotate()"/><br/>
    </p>
</body>
</html>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS3, um den Effekt von transparentem Hintergrundtext und Deckkraft zu erzielen

Implementierung eines linearen Farbverlaufs in CSS3

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung des 3D-Rotationseffekts CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!