pug+scss实现三维魔方旋转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：pug+scss实现三维魔方旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
  
    
      
<style type = 'text/scss'>
body {
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
  background: #434343;
  
  perspective: 90vh;

  * {
    transform-style: preserve-3d;
    box-sizing: border-box;
  }
}

.cube {
  --cube-size: 40vh;
  --color-1: #413B3B;
  --color-2: #FCE932;
  
  @media screen and (orientation: portrait) {
    --cube-size: 40vw;
  }

  position: relative;
  width: calc(var(--cube-size) + 20vh);
  height: calc(var(--cube-size) + 20vh);
  
  transform: rotateX(-20deg) rotateY(20deg) rotateZ(0deg);
  animation: animCube 40s infinite alternate ease-in-out;
  
  border: 1px solid rgba(white, 0);
  background-color: rgba(white, 0);
  border-radius: 1vh;
  transition: border 250ms ease-in-out, background-color 250ms ease-in-out;
  
  &:active {
    border: 1px solid rgba(white, .1);
    background-color: rgba(white, .03);
  }
}

.block {
  --block-size: calc(var(--cube-size) / 3);
  --block-x: calc(var(--block-size) / 2 * -1); // -50%;
  --block-y: calc(var(--block-size) / 2 * -1); // -50%;
  --block-z: 0;
  --block-rx: 0deg;
  --block-ry: 0deg;
  --block-rz: 0deg;
  --block-radius: 0px;
  --block-filter: 0px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  
  width: var(--block-size);
  height: var(--block-size);
  
  transform-origin: 0 0;
  transform:
    rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(var(--block-rz))
    translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z));
  
  transition: transform 1s ease-in-out;
  
  @for $i from 1 through 27 {
    &:nth-child(#{$i}) {
      animation: animBlock#{$i} 10s infinite alternate ease-in-out;
    }
  }
  
  &:hover {
    --block-radius: 3vh;
    --block-filter: sepia(50%);
    
    @media screen and (orientation: portrait) {
      --block-radius: 3vw;
    }
  }
  
  &:nth-child(-n + 9) { // 1 - 9
    --block-z: var(--block-size);
  }
  
  &:nth-child(n + 19) { // 19 - 27
    --block-z: calc(var(--block-size) * -1);
  }
  
  &:nth-child(n + 1):nth-child(-n + 3), // 1 - 3
  &:nth-child(n + 10):nth-child(-n + 12),
  &:nth-child(n + 19):nth-child(-n + 21) {
    --block-y: calc(var(--block-size) * -1.5);
  }
  
  &:nth-child(n + 7):nth-child(-n + 9),
  &:nth-child(n + 16):nth-child(-n + 18),
  &:nth-child(n + 25):nth-child(-n + 27) {
    --block-y: calc(var(--block-size) * .5);
  }
  
  &:nth-child(3n - 2) {
    --block-x: calc(var(--block-size) * -1.5);
  }
  
  &:nth-child(3n) {
    --block-x: calc(var(--block-size) * .5);
  }
  
  &__side {
    --side-size: var(--block-size);
    // --side-size: calc(var(--block-size) - 10px);
    
    position: absolute;
    top: 0;
    left: 0;
    
    width: var(--side-size);
    height: var(--side-size);
    background: var(--color-1);
    
    border-radius: var(--block-radius);
    transition: filter 500ms ease-in-out, border-radius 500ms ease-in-out;
    filter: none;
    
    &:hover {
      filter: var(--block-filter);
    }
    
    &:nth-child(1) {
      transform: translateZ(calc(var(--side-size) / 2));
    }
    
    &:nth-child(2) {
      transform: rotateY(90deg) translateZ(calc(var(--side-size) / 2));
    }
    
    &:nth-child(3) {
      transform: rotateY(-180deg) translateZ(calc(var(--side-size) / 2));
    }
    
    &:nth-child(4) {
      transform: rotateY(-90deg) translateZ(calc(var(--side-size) / 2));
    }
    
    &:nth-child(5) {
      background: var(--color-2);
      transform-origin: 0 0;
      transform: rotateX(90deg) translateY(-50%);
    }
    
    &:nth-child(6) {
      background: var(--color-2);
      transform-origin: 0 100%;
      transform: rotateX(90deg) translateY(50%);
    }
  }
}

@keyframes animCube {
  0% { transform: rotateX(-20deg) rotateY(20deg) rotateZ(90deg); }
  25% { transform: rotateX(20deg) rotateY(20deg) rotateZ(-90deg); }
  50% { transform: rotateX(20deg) rotateY(-120deg) rotateZ(0deg); }
  75% { transform: rotateX(-120deg) rotateY(-20deg) rotateZ(0deg); }
  100% { transform: rotateX(-20deg) rotateY(20deg) rotateZ(0deg); }
}

@keyframes animBlock1 {
  25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}

@keyframes animBlock2 {
  25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}

@keyframes animBlock3 {
  25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  50% { transform: rotateX(var(--block-rx)) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  75% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  100% { transform: rotateX(180deg) rotateY(90deg) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}

@keyframes animBlock4 {
  25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  50% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  75% { transform: rotateX(180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  100% { transform: rotateX(180deg) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}

@keyframes animBlock5 {
  25% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
  100% { transform: rotateX(var(--block-rx)) rotateY(var(--block-ry)) rotateZ(180deg) translateX(var(--block-x)) translateY(var(--block-y)) translateZ(var(--block-z)); }
}

@keyframes animBlock6 {
  25% { transform: rotate.........完整代码请登录后点击上方下载按钮下载查看