HTML5（七）——3D转换

最新推荐文章于 2024-04-04 12:00:12 发布

C-A-L-D

最新推荐文章于 2024-04-04 12:00:12 发布

阅读量528

点赞数 1

分类专栏： Web前端-html5

本文链接：https://blog.csdn.net/qq_42952262/article/details/105211564

版权

Web前端-html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在盒子（舞台）中添加样式：

transform: rotate3d(1, 1, 1, 50deg); /*给盒子（舞台）进行旋转，这样才能出现视角*/

transform-style: preserve-3d; /*让元素保留3D变换后的效果*/

<style>
        .box {
            width: 500px;
            height: 500px;
            /* background-color: rgba(0, 0, 0, 0.1); */
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            transform: rotate3d(1, 1, 1, 50deg);    /*给盒子（舞台）进行旋转，这样才能出现视角*/
            transform-style: preserve-3d;   /*让元素保留3D变换后的效果*/
        }

        .box > div {
            width: 300px;
            height: 300px;
            position: absolute;
        }

        /* 前 */
        .box > div:first-of-type {
            background-color: rgba(216, 29, 15, 0.5);
            transform: translateZ(150px);
        }

        /* 后 */
        .box > div:nth-of-type(2) {
            background-color: rgba(22, 172, 29, 0.5);
            transform: translateZ(-150px) rotateX(180deg);
        }

        /* 上 */
        .box > div:nth-of-type(3) {
            background-color: rgba(101, 19, 207, 0.5);
            transform: translateY(-150px) rotateX(-90deg);
        }

        /* 下 */
        .box > div:nth-of-type(4) {
            background-color: rgba(176, 209, 28, 0.5);
            transform: translateY(150px) rotateX(-90deg);
        }

        /* 左 */
        .box > div:nth-of-type(5) {
            background-color: rgba(207, 34, 129, 0.5);
            transform: translateX(-150px) rotateY(-90deg);
        }

        /* 右 */
        .box > div:nth-of-type(6) {
            background-color: rgba(129, 77, 226, 0.5);
            transform: translateX(150px) rotateY(90deg);
        }

    </style>
</head>

<body onload="f();">
    <div class="box">
        <div>前</div>
        <div>后</div>
        <div>上</div>
        <div>下</div>
        <div>左</div>
        <div>右</div>
    </div>
    <script>
        function f() {
            let i = 30;
            setInterval(() => {
                i++;
                document.querySelector('.box').setAttribute('style', 'transform: rotate3d(1, 1, 0, '+i+'deg);');
            }, 100);
        }
    </script>
</body>

景深透视效果：

左手法则：大拇指指向坐标轴的下方向，手指环绕方向为正方向

景深透视样式属性：

            /* 添加透视景深效果：视角位置在内部或者外部---值小于元素宽度则视角在内部，否则在外部 */
            perspective: 250px;

            /* 设置透视的观察角度：设置视角位置，0px 0px表示在正中心，向左看，左边值要减小，反之，右边值要减小*/
            perspective-origin: 0px 0px;

从内部看：

        .box {
            width: 500px;
            height: 500px;
            /* background-color: rgba(0, 0, 0, 0.1); */
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            transform: rotate3d(1, 1, 1, 50deg);    /*给盒子（舞台）进行旋转，这样才能出现视角*/
            transform-style: preserve-3d;   /*让元素保留3D变换后的效果*/
            /* 添加透视景深效果 */
            perspective: 10px;
        }

从正中心看：

        .box {
            width: 500px;
            height: 500px;
            /* background-color: rgba(0, 0, 0, 0.1); */
            position: absolute;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            margin: auto;
            transform: rotate3d(1, 1, 1, 50deg);    /*给盒子（舞台）进行旋转，这样才能出现视角*/
            transform-style: preserve-3d;   /*让元素保留3D变换后的效果*/
            /* 添加透视景深效果 */
            perspective: 10px;
            /* 设置透视的观察角度 */
            perspective-origin: 0px 0px;
        }

C-A-L-D

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5（七）——3D转换

在盒子（舞台）中添加样式：transform:rotate3d(1,1,1,50deg);/*给盒子（舞台）进行旋转，这样才能出现视角*/transform-style:preserve-3d;/*让元素保留3D变换后的效果*/<style> .box { width: 500px; ...
复制链接

扫一扫