CSS做3D旋转魔方(立方体)

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


<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>

效果如下:

你可能感兴趣的:(css,3D,动画)