vue3动画效果，立体图形动画

  

    

      

      

      

      

      

      

      

      

    
  



.box-container {
  perspective: 800px;
}

.box {
  position: relative;
  margin: 0 auto;
  margin-top:80px;
  width: 150px;
  height: 150px;
  transform-style: preserve-3d;
  animation: rotate-box 3s linear infinite;
}

.face1,
.face2,
.face3,
.face4,
.face5,
.face6,
.face7,
.face8 {
  position: absolute;
  width: 150px;
  height: 150px;
  background-color: #ff9933;
  border: 2px solid #fff;
  animation: color-change 5s ease-in-out infinite alternate;
}

.face1 {
  transform: rotate3d(1, 0, 0, 0deg) translateZ(75px);
}

.face2 {
  transform: rotate3d(0, 1, 0, 45deg) translateZ(75px);
}

.face3 {
  transform: rotate3d(0, 1, 0, 135deg) translateZ(75px);
}

.face4 {
  transform: rotate3d(1, 0, 0, 180deg) translateZ(75px);
}

.face5 {
  transform: rotate3d(1, 0, 0, -90deg) translateZ(75px);
}

.face6 {
  transform: rotate3d(0, 1, 0, -135deg) translateZ(75px);
}

.face7 {
  transform: rotate3d(0, 1, 0, -45deg) translateZ(75px);
}

.face8 {
  transform: rotate3d(1, 0, 0, 90deg) translateZ(75px);
}

@keyframes rotate-box {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

@keyframes color-change {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}