CSS3 金字塔拆分

unfold pyramid (pure CSS)

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2550
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<style>
html, body {
  height: 100%;
}

body {
  overflow: hidden;
  margin: 0;
  perspective: 64em;
  background: #000;
}

.assembly {
  margin-top: 8.83883em;
  animation: size 2s linear infinite;
}
.assembly, .assembly *, .assembly :before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
}

@keyframes size {
  from {
    transform: scale3d(0.5, 0.5, 0.5);
  }
}
.rot {
  transform: rotateX(-27deg) rotateY(45deg);
}

.pyramid:first-child {
  transform: scale3d(0.5, 0.5, 0.5);
}

.flipper:nth-child(1) {
  transform: rotateY(0deg) translateZ(12.5em) rotateX(35.24786deg);
}
.pyramid:last-child .flipper:nth-child(1) {
  animation: flip1 2s ease-out infinite;
}
@keyframes flip1 {
  0%, 0% {
    transform: rotateY(0deg) translateZ(12.5em) rotateX(35.24786deg);
    opacity: .999;
  }
  22.5% {
    opacity: .999;
  }
  100%, 25% {
    transform: rotateY(0deg) translateZ(12.5em) rotateX(-90deg);
    opacity: .001;
  }
}
.flipper:nth-child(2) {
  transform: rotateY(-90deg) translateZ(12.5em) rotateX(35.24786deg);
}
.pyramid:last-child .flipper:nth-child(2) {
  animation: flip2 2s ease-out infinite;
}
@keyframes flip2 {
  0%, 25% {
    transform: rotateY(-90deg) translateZ(12.5em) rotateX(35.24786deg);
    opacity: .999;
  }
  47.5% {
    opacity: .999;
  }
  100%, 50% {
    transform: rotateY(-90deg) translateZ(12.5em) rotateX(-90deg);
    opacity: .001;
  }
}
.flipper:nth-child(3) {
  transform: rotateY(-180deg) translateZ(12.5em) rotateX(35.24786deg);
}
.pyramid:last-child .flipper:nth-child(3) {
  animation: flip3 2s ease-out infinite;
}
@keyframes flip3 {
  0%, 50% {
    transform: rotateY(-180deg) translateZ(12.5em) rotateX(35.24786deg);
    opacity: .999;
  }
  72.5% {
    opacity: .999;
  }
  100%, 75% {
    transform: rotateY(-180deg) translateZ(12.5em) rotateX(-90deg);
    opacity: .001;
  }
}
.flipper:nth-child(4) {
  transform: rotateY(-270deg) translateZ(12.5em) rotateX(35.24786deg);
}
.pyramid:last-child .flipper:nth-child(4) {
  animation: flip4 2s ease-out infinite;
}
@keyframes flip4 {
  0%, 75% {
    transform: rotateY(-270deg) translateZ(12.5em) rotateX(35.24786deg);
    opacity: .999;
  }
  97.5% {
    opacity: .999;
  }
  100%, 100% {
    transform: rotateY(-270deg) translateZ(12.5em) rotateX(-90deg);
    opacity: .001;
  }
}
.flipper:before {
  margin: -12.5em;
  width: 25em;
  height: 25em;
  transform: scale(0.97) rotate(30deg) skewY(30deg) scaleX(0.86603);
  box-shadow: -.5em -.5em #000;
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 50%, #fe5e00 50%);
  content: '';
}
.flipper:nth-child(even):before {
  background: linear-gradient(-45deg, rgba(0, 0, 0, 0) 50%, #00fead 50%);
}

</style>
<div class='assembly'>
    <div class='rot'>
        <div class='pyramid'>
            <div class='flipper'></div>
            <div class='flipper'></div>
            <div class='flipper'></div>
            <div class='flipper'></div>
        </div>
        <div class='pyramid'>
            <div class='flipper'></div>
            <div class='flipper'></div>
            <div class='flipper'></div>
            <div class='flipper'></div>
        </div>
    </div>
</div>

unfold pyramid (pure CSS)

编辑器支持Emmet

快捷键

unfold pyramid (pure CSS)

很棒的纯CSS实现的3D金字塔内部透视

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：