CSS做3D旋转魔方（立方体）

最新推荐文章于 2024-04-04 02:17:04 发布

枫思然

最新推荐文章于 2024-04-04 02:17:04 发布

阅读量1k

点赞数 2

分类专栏： css 3D 动画文章标签： css 3D css动画

本文链接：https://blog.csdn.net/qq_38318589/article/details/98783059

版权

css 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

css做3D旋转魔方，使用的是3D位移与旋转属性，以及动画属性。代码不多，以下便是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>立方体</title>
    <style>
        @keyframes run{                      //添加一个为 run的动画
            0%{
                transform: rotate3d(1,1,1,0deg);           //动画开始时的旋转方向与角度
            }

            40%{                                                                                   //动画进行40%时的旋转方向与角度
                transform: rotate3d(1,1,1,80deg);        
            }

            70%{                                                                           //动画进行70%时的旋转方向与角度
                transform: rotate3d(1,1,1,280deg);
            }
            100%{
                transform: rotate3d(1,1,1,360deg);                   //动画进行100%时的旋转方向与角度
            }
        }


      *{                                          
          margin: 0;
          padding: 0;
      }

      .box{
          position: relative;
          top: 150px;
          left: 200px;
          width: 200px;
          height: 200px;
          transform-style: preserve-3d;
          animation: run 5s linear 0s infinite alternate;                    //将动画run 添加到这里
          //动画：动画名称  持续时间  速度曲线  延时  播放次数  是否轮流反向播放动画
      }

      .box div{                        //设置立方体每个面
        position: absolute;
        width: 200px;
        height: 200px;
        background-size: 100% 100%;
    
    }
    //分别给每个面添加一个背景图，并将前后上下左右六个面通过位移与旋转，放置到对应的位置。
      .f{                                    
          background-image: url(./image/猫.jpg);
           transform: translateZ(100px) ;
      }
      .b{
          background-image: url( ./image/p2.jpg  );
          transform: translateZ(-100px)  rotateY(-180deg);
      }
      .t{
        background-image: url( ./image/p1.jpg  );
          transform: translateY(-100px) rotateX(90deg);
      }
      .d{
        background-image: url( ./image/p8.jpg  );
          transform: translateY(100px) rotateX(-90deg);
      }
      .l{
        background-image: url( ./image/p6.jpg  );
          transform: translateX(-100px) rotateY(-90deg);
      }
      .r{
        background-image: url( ./image/p5.jpg  );
          transform: translateX(100px) rotateY(90deg);
      }
    </style>
</head>
<body>
   <div class="box">
       <div class="f"></div>
       <div class="b"></div>
       <div class="t"></div>
       <div class="d"></div>
       <div class="l"></div>
       <div class="r"></div>
   </div> 
</body>
</html>

效果如下：在这里插入图片描述

枫思然

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
CSS做3D旋转魔方（立方体）

css做3D旋转魔方，使用的是3D位移与旋转属性，以及动画属性。代码不多，以下便是全部代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, init...
复制链接

扫一扫