Maison  >  Article  >  interface Web  >  Introduction à l'utilisation de l'effet de rotation CSS3 3D

Introduction à l'utilisation de l'effet de rotation CSS3 3D

不言
不言original
2018-06-25 16:07:412516parcourir

Cet article présente principalement en détail les exemples d'effets de rotation 3D CSS3, qui ont une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article partage les exemples d'effets de rotation 3D CSS3 avec tout le monde. votre référence, le contenu spécifique est le suivant

Image d'effet :

Exemple de code

<!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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

CSS3 pour obtenir l'effet de texte transparent en arrière-plan et d'opacité

Mise en œuvre d'un dégradé de couleurs linéaire dans CSS3

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn