CSS+JS实现3D盒子

最新推荐文章于 2023-10-06 10:55:50 发布

墨阳丶暖风

最新推荐文章于 2023-10-06 10:55:50 发布

阅读量370

点赞数

文章标签： css js 3d

本文链接：https://blog.csdn.net/m0_37540082/article/details/115167585

版权

1.首先必须对3d坐标足够熟悉，如下图

初始页面在xy所在页面，默认3d转换中心在图的中点。

2.我们需要构成6个页面，形成一个正方形，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="fk.PNG">
    <title>css3D盒子</title>
    <style>
        html{
            perspective: 1000px; /*定义 3D 元素距视图的距离*/
            background-color: black;
        }
        .box{
            width: 200px;
            height: 200px;
            margin: 300px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: xuanzhuan 5s infinite linear;
        }
        @keyframes xuanzhuan {
            0%{
                transform: rotateX(0) rotateY(0) ;
            }
            100%{
                transform: rotateX(360deg) rotateY(360deg) ;
            }
        }
        .box>div{
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 200px;
        }
        .front{
            background-image: linear-gradient(160deg, #b100ff 20%,#00b3ff 80%);
        }
        .back{
            background-image: linear-gradient(160deg, #ff0064 20%,#ca00ff 80%);
        }
        .left{
            background-image: linear-gradient(160deg, #0078ff 20%,#ca00ff 80%);
        }
        .right{
            background-image: linear-gradient(160deg, #00ffd5 20%,#008cff 80%);
        }
        .top{
            background-image: linear-gradient(160deg, darkorchid 20%,#00b3ff 80%);
        }
        .bottom{
            background-image: linear-gradient(160deg, #a200ff 20%,#cf3700 80%);
        }
        /* .front{
          background-image: url('1.jpg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .back{
          background-image: url('1.jpg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .left{
          background-image: url('2.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .right{
          background-image: url('2.png');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .top{
          background-image: url('3.jpg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .bottom{
          background-image: url('3.jpg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
        } */
    </style>

</head>
<body>
<div class="box" id="box">
    <div class="front"></div>
    <div class="back"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="top"></div>
    <div class="bottom"></div>
</div>
<script>
    var box = document.getElementById("box");
    var boxChild = box.children;
    var listStyle = ["translateZ(200px)","translateZ(-200px)","rotateY(-90deg) translateZ(-200px)",
        "rotateY(90deg) translateZ(-200px)","rotateX(-90deg) translateZ(-200px)","rotateX(90deg) translateZ(-200px)"];
    var listHtyle = ["translateZ(100px)","translateZ(-100px)","rotateY(90deg) translateZ(100px)",
        "rotateY(-90deg) translateZ(100px)","rotateX(90deg) translateZ(100px)","rotateX(-90deg) translateZ(100px)"];

    box.onmousemove = function () {
        for (let i=0;i<boxChild.length;i++){
            boxChild[i].style.transform = listStyle[i];
        }
    };
    box.onmouseout = function () {
        for (let i=0;i<boxChild.length;i++){
            boxChild[i].style.transform = listHtyle[i];
        }
    };
    //初始化
    for (let i=0;i<boxChild.length;i++){
        boxChild[i].style.transform = listHtyle[i];
    }
</script>
</body>
</html>

下面对这个代码，有个简单的说明：

首先，我们有6个重合的div，然后我们需要对他们位置进行修改。分别对他们进行处理，100px是父容器200px的一半。沿着z轴向前后移动100px得到前后2个面；绕Y轴旋转90和-90度之后，沿着Z轴移动100px得到的是左右2个面；绕X轴旋转90和-90度之后，沿着Z轴移动100px得到的是上下2个面。这里需要注意一点，当存在2个3d转换的属性一起使用时，例如rotateX(90deg) translateZ(100px)，后面的转换会以前面的为坐标，因为3D转换，坐标系会跟着一起变动。

3.根据上面的，我们可以得到一个正方体了，可以随意的把div换成我们喜爱的图片，并且给父容器加上旋转动画，一个不错的3d盒子就出来了

墨阳丶暖风

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS+JS实现3D盒子

1.首先必须对3d坐标足够熟悉，如下图初始页面在xy所在页面，默认3d转换中心在图的中点。2.我们需要构成6个页面，形成一个正方形，代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="shortcut icon" href="fk.PNG"> <title>css3D盒子</titl..
复制链接

扫一扫