div+css实现三维立方体撕裂切片动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现三维立方体撕裂切片动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
 <style>
     .cube {
  height: 15rem;
  width: 15rem;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  -webkit-animation: cube 2.63s linear infinite;
          animation: cube 2.63s linear infinite;
}
.cube:before, .cube:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-animation: cube-outer 2.63s linear infinite;
          animation: cube-outer 2.63s linear infinite;
}
.cube:before {
  background: #222;
  transform: rotateY(-90deg) translateZ(7.5rem);
}
.cube:after {
  background: #fefefe;
  transform: rotateX(90deg) translateZ(7.5rem);
}

@-webkit-keyframes cube {
  from {
    transform: rotateX(-30deg) rotateY(45deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(135deg);
  }
}

@keyframes cube {
  from {
    transform: rotateX(-30deg) rotateY(45deg);
  }
  to {
    transform: rotateX(-30deg) rotateY(135deg);
  }
}
@-webkit-keyframes cube-outer {
  from {
    opacity: 1;
  }
  1.1787072243%, 79.8098859316% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cube-outer {
  from {
    opacity: 1;
  }
  1.1787072243%, 79.8098859316% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.backface {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  background: #222;
  transform: translateZ(-0.5rem) rotateZ(-90deg) rotateY(180deg);
}

.face, .backface {
  /* opacity: 0.5; */
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.face:before, .face:after, .backface:before, .backface:after {
  position: absolute;
  content: "";
  display: block;
}
.face:before, .backface:before {
  height: 100%;
  width: 0.5rem;
  transform-origin: left;
  transform: rotateY(-270deg);
  left: 0;
  top: 0;
}
.face:after, .backface:after {
  width: 100%;
  height: 0.5rem;
  transform-origin: top;
  transform: rotateX(270deg);
  left: 0;
  top: 0;
}

.face {
  height: 100%;
  width: 100%;
  background: #222;
  position: absolute;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}
.face:last-child {
  background-color: #222;
}
.face:first-child > .backface {
  background-color: gray;
}
.face:nth-child(2n):after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.face:nth-child(2n):before {
  background: gray;
  -webkit-animation: gray-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: gray-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n) > .backface:before {
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n) > .backface:after {
  top: 100%;
  background: #222;
  -webkit-animation: black-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: black-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1):after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1):before {
  background: gray;
  -webkit-animation: gray-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: gray-white 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1) > .backface {
  transform: translateZ(-0.5rem) rotateZ(-90deg) rotateY(180deg);
}
.face:nth-child(2n-1) > .backface:before {
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(2n-1) > .backface:after {
  top: 100%;
  background: #fefefe;
  -webkit-animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
          animation: white-black 2.63s cubic-bezier(0.455, 0.03, 0.515, 0.955) both infinite;
}
.face:nth-child(1) {
  -webkit-animation-name: face-1;
          animation-name: face-1;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(2) {
  -webkit-animation-name: face-2;
          animation-name: face-2;
  -webkit-animation-duration: 2.63s;
          animation-duration: 2.63s;
  -webkit-animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.face:nth-child(3) {
  -webkit-animation-name: face-3;
          animation-n.........完整代码请登录后点击上方下载按钮下载查看