魔方

最新推荐文章于 2023-04-19 21:15:59 发布

半成熟、

最新推荐文章于 2023-04-19 21:15:59 发布

阅读量285

点赞数 2

本文链接：https://blog.csdn.net/bs775926015/article/details/113134209

版权

魔方

魔方效果主要用CSS3实现。
效果如下：
在这里插入图片描述
步骤：1.在HTML创建1个父级div，6个子级div，并加上颜色和数字。
2.搭建一个3D空间，如perspective: 800px。然后给父级div加上一个3D层，显示3D效果。
3.给每一面设置角度。如transform:translateY(-200px) transform:rotateX。调整成魔方状。
4.给前面4面设置观看的角度。如transform-origin:right。后面依次改成left、bottom、top。
5.给父级元素.father加:hover，设置旋转角度。表示鼠标移到这魔方时，魔方会自动旋转。
在父级div .box添加transition:8s,表示动画时间或者动画速度。
魔方基本完成了
完整代码如下：

<!DOCTYPE html>

  <html lang="en">

  <head>

     <meta charset="UTF-8">

      <title>魔方</title>

      <style type="text/css">

          .father{
              width: 200px;
              height:200px;
              /* border:5px solid red;  */
              margin:20px auto;
              padding:200px;
              perspective: 800px;
              }
          .box {
              width:200px;
              height:200px;
              position:relative;
              /* border: 1px solid red; */
              transform-style:preserve-3d;
              transition:8S;
              transform-origin:center center -100px;
         }
         .box div{
             width: 200px;
             height:200px;
             position:absolute;
             color:white;
             font-size:50px;
             text-align: center;
             line-height:200px;
             }

         .box div:nth-of-type(1){
             background: #FF6600;
             transform:translateX(-200px) rotateY(-90deg);
             transform-origin:right;
            }
         .box div:nth-of-type(2){
             background:red ;
             transform:translateY(-200px) rotateX(90deg);
             transform-origin:bottom ;
         }
         .box div:nth-of-type(3){
             background:darkviolet;
             transform:translateX(200px) rotateY(90deg);
             transform-origin:left;
         }
         .box div:nth-of-type(4){
             background:yellow;
             transform: translateY(200px) rotateX(-90deg) ;
             transform-origin:top;
         }
         .box div:nth-of-type(5){
             background:green;
             transform:translateZ(-200px) rotateY(180deg);
         }
         .box div:nth-of-type(6){

             background:blue;
         }
         .father:hover .box{
             transform: rotateX(-360deg) rotateY(360deg) rotateX(360deg) rotateY(-360deg);
         }

     </style>

 </head>

 <body>

    <div class="father">

         <div class="box">

             <div>1</div>

             <div>2</div>

             <div>3</div>

             <div>4</div>

             <div>5</div>

             <div>6</div>

         </div>

    </div>

 </body>

  </html>