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

纯css实现立方体三维捻线机旋转动画效果

代码语言：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-tr.........完整代码请登录后点击上方下载按钮下载查看