纯css实现立方体三维捻线机旋转动画效果-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：纯css实现立方体三维捻线机旋转动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  background: #000;
  height: 100vh;
  overflow: hidden;
}

#ui {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-perspective: 700px;
          perspective: 700px;
}
#ui .box {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate 5000ms linear infinite;
          animation: rotate 5000ms linear infinite;
}
#ui .box_list {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  list-style-type: none;
}
#ui .box_list:nth-child(1) {
  -webkit-transform: translateY(-225px) rotateY(22deg);
          transform: translateY(-225px) rotateY(22deg);
}
#ui .box_list:nth-child(2) {
  -webkit-transform: translateY(-185px) rotateY(44deg);
          transform: translateY(-185px) rotateY(44deg);
}
#ui .box_list:nth-child(3) {
  -webkit-transform: translateY(-145px) rotateY(66deg);
          transform: translateY(-145px) rotateY(66deg);
}
#ui .box_list:nth-child(4) {
  -webkit-transform: translateY(-105px) rotateY(88deg);
          transform: translateY(-105px) rotateY(88deg);
}
#ui .box_list:nth-child(5) {
  -webkit-transform: translateY(-65px) rotateY(110deg);
          transform: translateY(-65px) rotateY(110deg);
}
#ui .box_list:nth-child(6) {
  -webkit-transform: translateY(-25px) rotateY(132deg);
          transform: translateY(-25px) rotateY(132deg);
}
#ui .box_list:nth-child(7) {
  -webkit-transform: translateY(15px) rotateY(154deg);
          transform: translateY(15px) rotateY(154deg);
}
#ui .box_list:nth-child(8) {
  -webkit-transform: translateY(55px) rotateY(176deg);
          transform: translateY(55px) rotateY(176deg);
}
#ui .box_list:nth-child(9) {
  -webkit-transform: translateY(95px) rotateY(198deg);
          transform: translateY(95px) rotateY(198deg);
}
#ui .box_list:nth-child(10) {
  -webkit-transform: translateY(135px) rotateY(220deg);
          transform: translateY(135px) rotateY(220deg);
}
#ui .box_list:nth-child(11) {
  -webkit-transform: translateY(175px) rotateY(242deg);
          transform: translateY(175px) rotateY(242deg);
}
#ui .box_list:nth-child(12) {
  -webkit-transform: translateY(215px) rotateY(264deg);
          transform: translateY(215px) rotateY(264deg);
}
#ui .box_list:nth-child(13) {
  -webkit-transform: translateY(255px) rotateY(286deg);
          transform: translateY(255px) rotateY(286deg);
}
#ui .box_list:nth-child(14) {
  -webkit-transform: translateY(295px) rotateY(308deg);
          transform: translateY(295px) rotateY(308deg);
}
#ui .box_list:nth-child(15) {
  -webkit-transform: translateY(335px) rotateY(330deg);
          transform: translateY(335px) rotateY(330deg);
}
#ui .box_list_item {
  position: absolute;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item:nth-child(1) {
  -webkit-transform: translateX(80px) rotateX(15deg);
          transform: translateX(80px) rotateX(15deg);
}
#ui .box_list_item:nth-child(1) .wall {
  background: rgba(203, 136, 108, 0.4);
}
#ui .box_list_item:nth-child(1) .wall_wrapper {
  -webkit-animation: wall 9000ms ease-in-out infinite alternate 250ms;
          animation: wall 9000ms ease-in-out infinite alternate 250ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item:nth-child(2) {
  -webkit-transform: translateX(120px) rotateX(30deg);
          transform: translateX(120px) rotateX(30deg);
}
#ui .box_list_item:nth-child(2) .wall {
  background: rgba(246, 54, 156, 0.4);
}
#ui .box_list_item:nth-child(2) .wall_wrapper {
  -webkit-animation: wall 9000ms ease-in-out infinite alternate 500ms;
          animation: wall 9000ms ease-in-out infinite alternate 500ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item:nth-child(3) {
  -webkit-transform: translateX(160px) rotateX(45deg);
          transform: translateX(160px) rotateX(45deg);
}
#ui .box_list_item:nth-child(3) .wall {
  background: rgba(182, 91, 167, 0.4);
}
#ui .box_list_item:nth-child(3) .wall_wrapper {
  -webkit-animation: wall 9000ms ease-in-out infinite alternate 750ms;
          animation: wall 9000ms ease-in-out infinite alternate 750ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item:nth-child(4) {
  -webkit-transform: translateX(200px) rotateX(60deg);
          transform: translateX(200px) rotateX(60deg);
}
#ui .box_list_item:nth-child(4) .wall {
  background: rgba(9, 206, 197, 0.4);
}
#ui .box_list_item:nth-child(4) .wall_wrapper {
  -webkit-animation: wall 9000ms ease-in-out infinite alternate 1000ms;
          animation: wall 9000ms ease-in-out infinite alternate 1000ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item:nth-child(5) {
  -webkit-transform: translateX(240px) rotateX(75deg);
          transform: translateX(240px) rotateX(75deg);
}
#ui .box_list_item:nth-child(5) .wall {
  background: rgba(68, 20, 48, 0.4);
}
#ui .box_list_item:nth-child(5) .wall_wrapper {
  -webkit-animation: wall 9000ms ease-in-out infinite alternate 1250ms;
          animation: wall 9000ms ease-in-out infinite alternate 1250ms;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item .wall {
  position: absolute;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 25%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#ui .box_list_item .wall:nth-child(1) {
  -webkit-transform: translateZ(17.6470588235px);
          transform: translateZ(17.6470588235px);
}
#ui .box_list_item .wall:nth-child(2) {
  -webkit-transform: translateY(17.6470588235px) rotateX(270deg);
          transform: translateY(17.6470588235px) rotateX(270deg);
}
#ui .box_list_item .wall:nth-child(3) {
  -webkit-transform: translateX(17.6470588235px) rotateY(-270deg);
          transform: translateX(17.6470588235px) rotateY(-270deg);
}
#ui .box_list_item .wall:nth-child(4) {
  -webkit-transform: translateX(-17.6470588235px) rotateY(-90deg);
          transform: translateX(-17.6470588235px) rotateY(-90deg);
}
#ui .box_list_item .wall:nth-child(5) {
  -webkit-transform: translateY(-17.6470588235px) rotateX(90deg);
          transform: translateY(-17.6470588235px) rotateX(90deg);
}
#ui .box_list_item .wall:nth-child(6) {
  -webkit-transform: translateZ(-17.6470588235px) rotateX(180deg);
          transform: translateZ(-17.6470588235px) rotateX(180deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
            transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(-1800deg);
            transform: rotateX(360deg) rotateY(-1800deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
            transform: rotateX(0deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(-1800deg);
            transform: rotateX(360deg) rotateY(-1800deg);
  }
}
@-webkit-keyframes wall {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
            transform: rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(-720deg) translate3d(-300px, -300px, -300px);
            transform: rotateX(360deg) rotateY(-720deg) translate3d(-300px, -300px, -300px);
  }
}
@keyframes wall {
  0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
            transform: rotateX(0deg) rotateY(0deg) translate3d(0px, 0px, 0px);
  }
  100% {
    -webkit-transform: rotateX(360deg) rotateY(-720deg) translate3d(-300px, -300px, -300px);
            transform: rotateX(360deg) rotateY(-720deg) translate3d(-300px, -300px, -300px);
  }
}
</style>

</head>
<body translate="no">
<div id="ui">
<div class="box">
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
</ul>
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
</ul>
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
 <div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
</ul>
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
</ul>
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
</ul>
<ul class="box_list">
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
<div class="wall"></div>
</div>
</li>
<li class="box_list_item">
<div class="wall_wrapper">
<div class="wall"></div>
<div class="wall"&g.........完整代码请登录后点击上方下载按钮下载查看