CSS3动画实例

怼烎@ 2023-06-21 15:25 3阅读 0赞

这是一个用CSS3实现的不规则旋转的3D相册！

## 布局 ##

## 样式表 ##

body { 
      text-align: center;
    }
    body > div { 
      margin: 200px auto;
    }
    img { 
      width: 100%;
      height: 100%;
    }
    
    .box { 
      animation: my-ani 8s linear;
      transform-style: preserve-3d;
      perspective: 10000px;
      position: relative;
      width: 500px;
      height: 500px;
    }
    
    .box > div { 
      width: 500px;
      height: 500px;
      position: absolute;
    }
    
    .box > div:nth-child(1) { transform: translateY(-250px) rotateX(90deg);}
    .box > div:nth-child(2) { transform: translateY(250px) rotateX(90deg);}
    .box > div:nth-child(3) { transform: translateX(-250px) rotateY(-90deg);}
    .box > div:nth-child(4) { transform: translateX(250px) rotateY(90deg);}
    .box > div:nth-child(5) { transform: translateZ(250px);}
    .box > div:nth-child(6) { transform: translateZ(-250px);}
    
    @keyframes my-ani { 
      0% { transform: rotateY(0deg) rotateX(0deg);}
      20% { transform: rotateY(72deg) rotateX(72deg);}
      40% { transform: rotateY(144deg) rotateX(144deg);}
      60% { transform: rotateY(216deg) rotateX(216deg);}
      80% { transform: rotateY(288deg) rotateX(288deg);}
      100% { transform: rotateY(360deg) rotateX(360deg);}
    }

## 效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwd19jbg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwd19jbg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191213142559132.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xwd19jbg==,size_16,color_FFFFFF,t_70