立方体（纯CSS 3D）

下载代码

html

css

分享到微信朋友圈

html

css

.cube:nth-child(13) {
  animation-name: m0;
}
.cube:nth-child(13) div:before {
  animation-name: fade0;
}

@keyframes m0 {
  0% {
    transform: none;
  }
  20%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade0 {
  0% {
    opacity: .999;
  }
  20%, 100% {
    opacity: .001;
  }
}
.cube:nth-child(8), .cube:nth-child(12), .cube:nth-child(14), .cube:nth-child(18) {
  animation-name: m1;
}
.cube:nth-child(8) div:before, .cube:nth-child(12) div:before, .cube:nth-child(14) div:before, .cube:nth-child(18) div:before {
  animation-name: fade1;
}

@keyframes m1 {
  10% {
    transform: none;
  }
  30%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade1 {
  10% {
    opacity: .999;
  }
  30%, 100% {
    opacity: .001;
  }
}
.cube:nth-child(7), .cube:nth-child(9), .cube:nth-child(17), .cube:nth-child(19) {
  animation-name: m2;
}
.cube:nth-child(7) div:before, .cube:nth-child(9) div:before, .cube:nth-child(17) div:before, .cube:nth-child(19) div:before {
  animation-name: fade2;
}

@keyframes m2 {
  20% {
    transform: none;
  }
  40%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade2 {
  20% {
    opacity: .999;
  }
  40%, 100% {
    opacity: .001;
  }
}
.cube:nth-child(3), .cube:nth-child(11), .cube:nth-child(15), .cube:nth-child(23) {
  animation-name: m3;
}
.cube:nth-child(3) div:before, .cube:nth-child(11) div:before, .cube:nth-child(15) div:before, .cube:nth-child(23) div:before {
  animation-name: fade3;
}

@keyframes m3 {
  30% {
    transform: none;
  }
  50%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade3 {
  30% {
    opacity: .999;
  }
  50%, 100% {
    opacity: .001;
  }
}
.cube:nth-child(2), .cube:nth-child(4), .cube:nth-child(6), .cube:nth-child(10), .cube:nth-child(16), .cube:nth-child(20), .cube:nth-child(22), .cube:nth-child(24) {
  animation-name: m4;
}
.cube:nth-child(2) div:before, .cube:nth-child(4) div:before, .cube:nth-child(6) div:before, .cube:nth-child(10) div:before, .cube:nth-child(16) div:before, .cube:nth-child(20) div:before, .cube:nth-child(22) div:before, .cube:nth-child(24) div:before {
  animation-name: fade4;
}

@keyframes m4 {
  40% {
    transform: none;
  }
  60%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade4 {
  40% {
    opacity: .999;
  }
  60%, 100% {
    opacity: .001;
  }
}
.cube:nth-child(1), .cube:nth-child(5), .cube:nth-child(21), .cube:nth-child(25) {
  animation-name: m5;
}
.cube:nth-child(1) div:before, .cube:nth-child(5) div:before, .cube:nth-child(21) div:before, .cube:nth-child(25) div:before {
  animation-name: fade5;
}

@keyframes m5 {
  50% {
    transform: none;
  }
  70%, 100% {
    transform: translateZ(-15em) rotateX(90deg);
  }
}
@keyframes fade5 {
  50% {
    opacity: .999;
  }
  70%, 100% {
    opacity: .001;
  }
}
body {
  overflow: hidden;
  margin: 0;
  height: 100vh;
  perspective: 40em;
  background: #222;
}

.assembly {
  animation: a 2.8s linear infinite;
}

@keyframes a {
  to {
    transform: translateZ(15em);
  }
}
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

.cube {
  animation: ph 2.8s cubic-bezier(0.65, 0.05, 0.35, 1) infinite;
}
.cube:nth-child(1) {
  margin: -10em -10em;
}
.cube:nth-child(2) {
  margin: -10em -5em;
}
.cube:nth-child(3) {
  margin: -10em 0em;
}
.cube:nth-child(4) {
  margin: -10em 5em;
}
.cube:nth-child(5) {
  margin: -10em 10em;
}
.cube:nth-child(6) {
  margin: -5em -10em;
}
.cube:nth-child(7) {
  margin: -5em -5em;
}
.cube:nth-child(8) {
  margin: -5em 0em;
}
.cube:nth-child(9) {
  margin: -5em 5em;
}
.cube:nth-child(10) {
  margin: -5em 10em;
}
.cube:nth-child(11) {
  margin: 0em -10em;
}
.cube:nth-child(12) {
  margin: 0em -5em;
}
.cube:nth-child(13) {
  margin: 0em 0em;
}
.cube:nth-child(14) {
  margin: 0em 5em;
}
.cube:nth-child(15) {
  margin: 0em 10em;
}
.cube:nth-child(16) {
  margin: 5em -10em;
}
.cube:nth-child(17) {
  margin: 5em -5em;
}
.cube:nth-child(18) {
  margin: 5em 0em;
}
.cube:nth-child(19) {
  margin: 5em 5em;
}
.cube:nth-child(20) {
  margin: 5em 10em;
}
.cube:nth-child(21) {
  margin: 10em -10em;
}
.cube:nth-child(22) {
  margin: 10em -5em;
}
.cube:nth-child(23) {
  margin: 10em 0em;
}
.cube:nth-child(24) {
  margin: 10em 5em;
}
.cube:nth-child(25) {
  margin: 10em 10em;
}
.cube__face {
  margin: -2em;
  width: 4em;
  height: 4em;
  backface-visibility: hidden;
}
.cube__face:nth-child(-n + 4):before {
  position: absolute;
  width: inherit;
  height: inherit;
  animation: ph 2.8s ease-in-out infinite;
  content: '';
}
.cube__face:nth-child(n + 5) {
  background: #919191;
}
.cube__face:nth-child(1) {
  transform: rotateX(0deg) translateZ(2em);
  background: #dddddd;
}
.cube__face:nth-child(1):before {
  background: #c4c4c4;
}
.cube__face:nth-child(2) {
  transform: rotateX(90deg) translateZ(2em);
  background: #c4c4c4;
}
.cube__face:nth-child(2):before {
  background: #dddddd;
}
.cube__face:nth-child(3) {
  transform: rotateX(180deg) translateZ(2em);
  background: #aaaaaa;
}
.cube__face:nth-child(3):before {
  background: #c4c4c4;
}
.cube__face:nth-child(4) {
  transform: rotateX(270deg) translateZ(2em);
  background: #c4c4c4;
}
.cube__face:nth-child(4):before {
  background: #aaaaaa;
}
.cube__face:nth-child(5) {
  transform: rotateY(90deg) translateZ(2em);
}
.cube__face:nth-child(6) {
  transform: rotateY(-90deg) translateZ(2em);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg