day13CSS3实现旋转立方体

最新推荐文章于 2024-09-23 13:36:11 发布

WEB-

最新推荐文章于 2024-09-23 13:36:11 发布

阅读量71

点赞数 1

文章标签： css3 html5 web 大前端前端

本文链接：https://blog.csdn.net/weixin_45637649/article/details/111656490

版权

这段代码展示了如何使用CSS3实现一个3D立体旋转效果。通过设置perspective、transform属性，结合关键帧动画，创建了一个360度旋转的立方体。当鼠标悬停在元素上时，各个面会放大展示，提供了一种交互式的视觉体验。

摘要由CSDN通过智能技术生成

    body{
        perspective: 2000px;
    }
    
    .wrap{
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 100px auto;
        position: relative;
        transform-style: preserve-3d;
        animation: run 5s linear infinite ;
       
    }
    .box{
        width: 300px;
        height: 300px;
        border: 1px solid black;
        position: absolute;
        top: 0;
        opacity: .5;
        transition:all 2s linear;
    }
    
   
    
    .qian{
        transform: translateZ(150px);
    }
    .hou{
        transform: rotateY(180deg) translateZ(150px);
    }
    .left{
        transform: rotateY(-90deg) translateZ(150px);
    }
    .right{
        transform: rotateY(90deg) translateZ(150px);
    }
    .top1{
        transform: rotateX(90deg) translateZ(150px);

    }
    .bottom1{
        transform: rotateX(-90deg) translateZ(150px);
    }
    @keyframes run{
        0%{
            transform: rotateY(0);
        }
        100%{
            transform: rotateY(360deg);
        }
    }


    .sm-box{
        width: 100px;
        height: 100px;
        border: 1px solid black;
        position: absolute;
        top: 100px;
        left: 100px;
    }
    .sm-qian{
        transform: translateZ(50px);
    }
    .sm-hou{
        transform: rotateY(180deg) translateZ(50px);
    }
    .sm-left{
        transform: rotateY(-90deg) translateZ(50px);
    }
    .sm-right{
        transform: rotateY(90deg) translateZ(50px);
    }
    .sm-top1{
        transform: rotateX(90deg) translateZ(50px);

    }
    .sm-bottom1{
        transform: rotateX(-90deg) translateZ(50px);
    }
    /* 悬浮 */
    .wrap:hover .qian{
        transform: translateZ(300px);
    }
    .wrap:hover .hou{
        transform: rotateY(180deg) translateZ(300px);
    }
    .wrap:hover .left{
        transform: rotateY(-90deg) translateZ(300px);
    }
    .wrap:hover .right{
        transform: rotateY(90deg) translateZ(300px);
    }
    .wrap:hover .top1{
        transform: rotateX(90deg) translateZ(200px);

    }
    .wrap:hover .bottom1{
        transform: rotateX(-90deg) translateZ(300px);
    }
    
    /* .wrap:hover .qian{
        position: absolute;
        left: 400px;

    } */
   
    img{
        width: 300px;
        height: 300px;
    }
    #imgs{
        width: 100px;
        height: 100px;
    }


</style>

<div class="wrap">
    <div class="box left">
        <img src="1.jpg" alt="">
    </div>
    <div class="box right" > <img src="1.jpg" alt=""></div>
    <div class="box top1"> <img src="1.jpg" alt=""></div>
    <div class="box bottom1"> <img src="1.jpg" alt=""></div>
    <div class="box qian"> <img src="1.jpg" alt=""></div>
    <div class="box hou"> <img src="1.jpg" alt=""></div>




    <div class="sm-box sm-left">
        <img src="1.jpg" alt="" id="imgs">
    </div>
    <div class="sm-box sm-right" ><img src="1.jpg" alt="" id="imgs"></div>
    <div class="sm-box sm-top1"><img src="1.jpg" alt="" id="imgs"></div>
    <div class="sm-box sm-bottom1"><img src="1.jpg" alt="" id="imgs"></div>
    <div class="sm-box sm-qian"><img src="1.jpg" alt="" id="imgs"></div>
    <div class="sm-box sm-hou"><img src="1.jpg" alt="" id="imgs"></div>
</div>