旋转正六面体

2023-11-24 23:09:22

设置视距800px

在需要旋转的元素内，要做出3d效果，需要设置 transform-style: preserve-3d;

使用 vertical-align: top;去除图片之间的基线缝隙

  <title>旋转六面正方体</title>
    <style>
        html{
         perspective: 800px;

        }
        .cube{
            width: 200px;
            height: 200px;
          
            margin: 100px auto;
           
            transform-style: preserve-3d;
            animation: rotate 20s infinite ;

        }
        .cube img{
            width: 200px;
            height: 200px;
            opacity: 0.7;
            position: absolute;
            vertical-align: top;
            
        }
        .box1{
            transform: rotateY(90deg) translateZ(100px) ;
        }
        .box2{
            transform: rotateY(-90deg) translateZ(100px);
        }
       
        .box3{
            transform: rotateX(90deg) translateY(-100px);
        }  
       
        .box4{
            transform: rotateX(-90deg)  translateY(-100px)  translateZ(200px);
        }
        
    
        .box5{
            transform: rotateY(180deg) translateZ(100px);
        }
        .box6{
            transform: rotateY(0deg)  translateZ(100px);
        }
        
        @keyframes rotate{
            from{
                transform: rotateX(0) rotateZ(0);

            }
            to{
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="cube">
        <div  class="box1"  ><img src="../项目练习exercise/练习的截图/h1.jpg" alt=""></div>
        <div  class="box2" ><img src="../项目练习exercise/练习的截图/h2.jpg" alt=""></div>
        <div  class="box3"  ><img src="../项目练习exercise/练习的截图/h3.jpg" alt=""></div>
        <div  class="box4" ><img src="../项目练习exercise/练习的截图/h4.jpg" alt=""></div>
        <div  class="box5"  ><img src="../项目练习exercise/练习的截图/h5.jpg" alt=""></div>
        <div  class="box6" ><img src="../项目练习exercise/练习的截图/h6.jpg" alt=""></div>
       
    </div>
   
</body>
</html>

码农公寓

相关文章