CSS3中的3D旋转 rotate、3D位移 translate

最新推荐文章于 2024-06-19 09:58:25 发布

葡萄干是个程序员

最新推荐文章于 2024-06-19 09:58:25 发布

阅读量6.9k

点赞数

分类专栏： Web前端文章标签： html css3 3D旋转rotate 3D位移translate

本文链接：https://blog.csdn.net/qq_15096707/article/details/50987378

版权

Web前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

这里只考虑 chrome 的兼容。

3DrotateDemo.html

<!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>
    <div id="experiment">
        <div id="block"></div>
    </div>
    <div 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" οnmοusemοve="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" οnmοusemοve="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" οnmοusemοve="rotate()"/><br/>
    </div>
</body>
</html>

运行结果如下：

3DtranslateDemo.html

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

            transition: background-color 1s;
            -webkit-transition: background-color 1s;
        }
        #block:hover {
            background-color: purple;
        }
        #op {
            text-align: center;
        }
        #op input {
            width: 800px;
        }
    </style>
    <script>
        function translateall() {
            var x = document.getElementById("translateX").value;
            var y = document.getElementById("translateY").value;
            var z = document.getElementById("translateZ").value;
            document.getElementById("block").style.webkitTransform = "translate3d(" + x + "px," + y + "px," + z + "px)";

            document.getElementById("translatex-span").innerText = x;
            document.getElementById("translatey-span").innerText = y;
            document.getElementById("translatez-span").innerText = z;
        }
    </script>
</head>
<body>
    <div id="experiment">
        <div id="block">

        </div>
    </div>
    <div id="op">
        <p>translate x: <span id="translatex-span">0</span>px</p>
        <input type="range" min="-360" max="360" id="translateX" value="0" class="range-control" οnmοusemοve="translateall()"/><br/>
        <p>translate y: <span id="translatey-span">0</span>px</p>
        <input type="range" min="-360" max="360" id="translateY" value="0" class="range-control" οnmοusemοve="translateall()"/><br/>
        <p>translate z: <span id="translatez-span">0</span>px</p>
        <input type="range" min="-360" max="360" id="translateZ" value="0" class="range-control" οnmοusemοve="translateall()"/><br/>
    </div>
</body>
</html>

运行结果如下：

葡萄干是个程序员

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3中的3D旋转 rotate、3D位移 translate

这里只考虑 chrome 的兼容。3DrotateDemo.html 3D旋转的Demo #experiment { -webkit-perspective: 800; -webkit-perspective-origin: 50% 50%; -webkit-transf
复制链接

扫一扫

专栏目录