section {
  text-align: center;
}
/** ******************************
   * prism
   */
.prism .prism-wrap {
  position: relative;
  display: inline-block;
  width: 150px;
  height: 300px;
  transform-style: preserve-3d;
  animation: stage 2s linear 0s infinite both;
}
.prism .area {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 300px;
  background: rgba(153, 204, 204, 0.8);
}
.prism .area:nth-child(1) {
  transform: rotateY(0deg) translateZ(43.30254042px);
}
.prism .area:nth-child(2) {
  transform: rotateY(120deg) translateZ(43.30254042px);
}
.prism .area:nth-child(3) {
  transform: rotateY(240deg) translateZ(43.30254042px);
  background: rgba(148, 170, 175, 0.8);
}
/** ******************************
 * gallery
 */
.gallery {
  position: relative;
  perspective: 800px;
  height: 600px;
  z-index: 10;
}
.gallery .gallery-wrap {
  position: relative;
  z-index: 2;
  top: calc(50% - 180px/2);
  display: inline-block;
  width: 300px;
  height: 180px;
  transform-style: preserve-3d;
}
.gallery-transiton {
  transition: transform 1s linear 0s;
}
.gallery .rect {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  line-height: 180px;
  background: rgba(153, 204, 204, 0.8) center center / auto 100% no-repeat;
  background-color: unset;
}
.gallery .rect:nth-child(1) {
  transform: rotateY(0) translateZ(480px);
  background-image: url(../images/ai5.png);
}
.gallery .rect:nth-child(2) {
  transform: rotateY(120deg) translateZ(480px);
  background-image: url(../images/language2.jpg);
}
.gallery .rect:nth-child(3) {
  transform: rotateY(240deg) translateZ(480px);
  background-image: url(../images/languages.jpeg);
  background-size: 100% auto;
}
.gallery .rect:nth-child(4) {
  transform: rotateY(180deg) translateZ(480px);
}
.gallery .rect:nth-child(5) {
  transform: rotateY(240deg) translateZ(480px);
}
.gallery .rect:nth-child(6) {
  transform: rotateY(300deg) translateZ(480px);
}
.gallery .rect img {
  width: 100%;
}
.sky-bg {
  transform-style: preserve-3d;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/star-sky.jpg) center center / 100% auto;
  /* transform: rotateX(15deg) */
}
.gallery-indicates {
  position: absolute;
  right: 20px;
  top: 50%;
  z-index: 2;
  transform: translate(0, -50%);
  cursor: pointer;
}
.gallery-indicates > li {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  margin: 10px 0;
  border-radius: 50%;
  background: #999;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}
.gallery-indicates > li:before {
  content: "";
  transform: translate(0, -100%);
  display: block;
  width: 100%;
  height: 100%;
  background: #007bff;
}
.gallery-indicates > li:after {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  transform: translate(0, -100%);
  display: block;
  width: 100%;
  height: 100%;
  background: #ff6600;
}
.gallery-indicates > li.active:before {
  transition: transform 1s linear 0s;
  transform: translate(0, 0);
}
.gallery-indicates > li.waiting:after {
  transition: transform 4s linear 0s;
  transform: translate(0, 0);
}
/** ******************************
 * cube
 */
.cube {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.cube-wrap {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  animation: cube 4s linear 0s infinite both;
}
.cube-wrap li {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: -webkit-radial-gradient(center, circle, rgba(255, 255, 255, 0), #646464);
}
.cube-wrap .top {
  transform: translateZ(50px);
}
.cube-wrap .bottom {
  transform: translateZ(-50px);
}
.cube-wrap .left {
  transform: rotateY(90deg) translateZ(50px);
}
.cube-wrap .right {
  transform: rotateY(90deg) translateZ(-50px);
}
.cube-wrap .front {
  transform: rotateX(90deg) translateZ(50px);
}
.cube-wrap .back {
  transform: rotateX(90deg) translateZ(-50px);
}
@keyframes cube {
  from {
    transform: rotateX(-33.5deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-33.5deg) rotateY(360deg);
  }
}
@keyframes stage {
  from {
    transform: rotateY(0);
  }
  from {
    transform: rotateY(360deg);
  }
}
@keyframes stagedelay {
  0% {
    transform: rotateY(0);
  }
  16.5% {
    transform: rotateY(120deg);
  }
  33.3% {
    transform: rotateY(120deg);
  }
  49.8% {
    transform: rotateY(240deg);
  }
  66.6% {
    transform: rotateY(240deg);
  }
  83% {
    transform: rotateY(360deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
/** ******************************
   * tri
   */
.tri .tri-ul {
  position: relative;
  left: 40%;
  list-style: none;
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(0deg);
  animation: cube 3s linear 0s infinite;
  animation-fill-mode: both;
}
.tri li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.tri .left {
  transform: translateX(-50px) rotateY(90deg);
  background-color: green;
}
.tri .right {
  transform: translateX(50%) rotateY(90deg);
  background-color: orange;
}
.tri .front {
  transform: translate3d(0, 0, 50px);
  background-color: #58a;
}
.tri .back {
  transform: translate3d(0, 0, -50px);
  background: #142dbb;
}