CSS를 기반으로 갤러리 및 슬라이드 쇼에 유용하고 간단한 뒤집기 효과. 

https://codepen.io/z-/pen/PoYepvR 

https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css

https://fonts.googleapis.com/css?family=Roboto&display=swap

https://pro.fontawesome.com/releases/v5.10.2/css/all.css

HTML : 

<div class="row">

<div class="wrapper" style="--width:220px; --height:100px;--duration: 14s; --offset:-6s">

<div class="rotate">

<a href="https://open.spotify.com/track/6oDjm30FUtB8GcckQEh3Tr?si=1s6UXE3qQr23q1Cs80ZR3A" target="_blank" class="front image-banner t-white">

<img src="https://i.scdn.co/image/b36667408f857642df1af7b2279eec5aadf51d0c" alt="">

<div class="text">

<div class="b">Breakfast In Bed</div>

<div>Dntel</div>

</div>

</a>

<a href="https://open.spotify.com/track/0OvhFCkLYdLSypCNHITORc?si=8J_B3MIgTQKUYhJCUOUFuQ" target="_blank" class="bottom image-banner">

<div class="text">

<div class="b">Harrison Ford</div>

<div>Darlingside</div>

</div>

<img src="https://i.scdn.co/image/912394b1b5a4ddee064db7dc6b53b9eac42a1314" alt="">

</a>

<a href="https://open.spotify.com/track/7FSqGltIongF1SGwvVXlzm?si=tdf5H1r8RJKhYcc5YI6-Mw" target="_blank" class="back image-banner t-white">

<img src="https://i.scdn.co/image/c8136476534c35d60569b0be9f01b4587640073b" alt="">

<div class="text">

<div class="b">Monster</div>

<div>Magic Bronson</div>

</div>

</a>

<a href="https://open.spotify.com/track/4ebsjAw316emhy51exMQdK?si=GFus0NQKR2atvHBpOFnz9Q" target="_blank" class="top image-banner t-white">

<div class="text">

<div class="b">HEY YOU!</div>

<div>Edu</div>

</div>

<img src="https://i.scdn.co/image/e77befa063c9f18a5710b56db88e9973b131a3da" alt="">

</a>

</div>

</div>

<div class="square"></div>

<div class="square"></div>

</div>

<div class="row">

<div class="column">

<div class="square"></div>

<div class="square"></div>

</div>

<div class="wrapper" style="--width:220px; --height:220px; --offset:-4s">

<div class="rotate">

<a href="https://codepen.io/z-/pen/XPQyMo" target="_blank" class="front backgroundimage" style="background-image:url(https://i.imgur.com/tyb17ct.png); background-color:#323133;"></a>

<a href="https://codepen.io/z-/pen/ZMbLNM" target="_blank" class="bottom backgroundimage" style="background-image:url(https://i.imgur.com/i9LrIoq.png); background-color:#4A89DC;"></a>

<a href="https://codepen.io/z-/pen/OBPJKK" target="_blank" class="back backgroundimage" style="background-image:url(https://i.imgur.com/Zj5MXDQ.png); background-color:#CCD1D9;"></a>

<a href="https://codepen.io/z-/pen/MJKNJZ" target="_blank" class="top backgroundimage" style="background-image:url(https://i.imgur.com/KRdYPi8.png); background-color:#8067B7;"></a>

</div>

</div>

<div class="column">

<div class="square"></div>

<div class="row">

<div class="square small"></div>

<div class="square small"></div>

</div>

<div class="row">

<div class="square small"></div>

<div class="square small"></div>

</div>

</div>

</div>

<div class="row">

<div class="square long"></div>

<div class="square"></div>

<div class="wrapper" style="--width:100px; --height:100px; --offset:-14s; --duration: 20s;">

<div class="rotate">

<a href="https://codepen.io/z-" target="_blank" class="front icon t-white" style="font-size:3rem; background:#323133;"><i class="fab fa-codepen"></i></a>

<a href="#thirdbottom" class="bottom icon t-white" style="font-size:3rem; background:#7289da;"><i class="fab fa-discord"></i></a>

<a href="#thirdback" class="back icon t-white" style="font-size:3rem; background:#ff0000;"><i class="fab fa-youtube"></i></a>

<a href="https://twitter.com/Osorpenke" target="_blank" class="top icon t-white" style="font-size:3rem; background:#1da1f2;"><i class="fab fa-twitter"></i></a>

</div>

</div>

</div>

CSS : 

body {

  --animation-duration: 16s;

  --tile-width: 200px;

  --tile-height: 100px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  min-height: 100vh;

  font-family: 'Roboto', sans-serif;

}

body .row {

  display: flex;

  flex-direction: row;

}

body .row > *:not(.row):not(.column), body .row .row > *:not(.row):not(.column), body .row .column > *:not(.row):not(.column) {

  margin: 10px;

}

body .column {

  display: flex;

  flex-direction: column;

}

body .wrapper .rotate > *, body .square {

  box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.3);

}

body .wrapper .rotate > *:hover, body .square:hover {

  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5);

}

body .wrapper {

  width: var(--width);

  height: var(--height);

  display: inline-block;

  -webkit-perspective: 0px;

          perspective: 0px;

  -webkit-perspective-origin: 50% 50%;

          perspective-origin: 50% 50%;

  cursor: pointer;

}

body .wrapper .rotate {

  position: relative;

  width: var(--width);

  -webkit-transform-style: preserve-3d;

          transform-style: preserve-3d;

  -webkit-transform-origin: 0 calc(var(--height)/2);

          transform-origin: 0 calc(var(--height)/2);

  -webkit-animation: spin var(--duration, var(--animation-duration)) infinite ease var(--offset, 0s);

          animation: spin var(--duration, var(--animation-duration)) infinite ease var(--offset, 0s);

}

body .wrapper .rotate:hover {

  -webkit-animation-play-state: paused;

          animation-play-state: paused;

}

body .wrapper .rotate > a {

  color: inherit;

  text-decoration: none;

}

body .wrapper .rotate .front {

  background: #ED5565;

  -webkit-transform: translateZ(calc(var(--height)/2));

          transform: translateZ(calc(var(--height)/2));

}

body .wrapper .rotate .bottom {

  background: #FFCE54;

  -webkit-transform: rotateX(-90deg) translateY(calc(var(--height)/2));

          transform: rotateX(-90deg) translateY(calc(var(--height)/2));

  -webkit-transform-origin: bottom center;

          transform-origin: bottom center;

}

body .wrapper .rotate .back {

  background: #2ECC71;

  -webkit-transform: translateZ(calc(var(--height)/-2)) rotateX(180deg);

          transform: translateZ(calc(var(--height)/-2)) rotateX(180deg);

}

body .wrapper .rotate .top {

  background: #5D9CEC;

  -webkit-transform: rotateX(-270deg) translateY(calc(var(--height)/-2));

          transform: rotateX(-270deg) translateY(calc(var(--height)/-2));

  -webkit-transform-origin: top center;

          transform-origin: top center;

}

body .wrapper .rotate > * {

  position: absolute;

  width: var(--width);

  height: var(--height);

  transition: .25s -.1s;

}

body .wrapper .rotate > *.t-white {

  color: white;

}

body .wrapper .rotate > *.image-banner {

  display: flex;

  flex-direction: row;

  align-items: center;

}

body .wrapper .rotate > *.image-banner > *:not(img) {

  flex-grow: 1;

}

body .wrapper .rotate > *.image-banner > * {

  margin: 10px 0 10px 10px;

}

body .wrapper .rotate > *.image-banner > *:first-child {

  margin-left: 10px;

}

body .wrapper .rotate > *.image-banner > *:last-child {

  margin-right: 10px;

}

body .wrapper .rotate > *.image-banner img {

  height: calc(100% - 20px);

}

body .wrapper .rotate > *.image-banner .text {

  display: flex;

  flex-direction: column;

}

body .wrapper .rotate > *.image-banner .text .b {

  font-weight: bold;

}

body .wrapper .rotate > *.backgroundimage {

  background-size: 200px 200px;

  background-position: center;

  background-repeat: no-repeat;

}

body .wrapper .rotate > *.icon {

  line-height: var(--height);

  text-align: center;

}

body .square {

  background: #CCD1D9;

  width: var(--tile-height);

  height: var(--tile-height);

  cursor: pointer;

  transition: .25s -.1s;

}

body .square.small {

  width: calc(var(--tile-height)/2 - 10px);

  height: calc(var(--tile-height)/2 - 10px);

}

body .square.long {

  width: calc(var(--tile-height) * 2 + 20px);

  height: var(--tile-height);

}

@-webkit-keyframes spin {

  10.001%, 15%, 35.001%, 40%, 60.001%, 65%, 85.001%, 90% {

    pointer-events: none;

  }

  0%, 10% {

    -webkit-transform: rotateX(0);

            transform: rotateX(0);

    pointer-events: initial;

  }

  15.001%, 25%, 35% {

    -webkit-transform: rotateX(90deg);

            transform: rotateX(90deg);

    pointer-events: initial;

  }

  40.001%, 50%, 60% {

    -webkit-transform: rotateX(180deg);

            transform: rotateX(180deg);

    pointer-events: initial;

  }

  65.001%, 75%, 85% {

    -webkit-transform: rotateX(270deg);

            transform: rotateX(270deg);

    pointer-events: initial;

  }

  90.001%, 100% {

    -webkit-transform: rotateX(360deg);

            transform: rotateX(360deg);

    pointer-events: initial;

  }

}

@keyframes spin {

  10.001%, 15%, 35.001%, 40%, 60.001%, 65%, 85.001%, 90% {

    pointer-events: none;

  }

  0%, 10% {

    -webkit-transform: rotateX(0);

            transform: rotateX(0);

    pointer-events: initial;

  }

  15.001%, 25%, 35% {

    -webkit-transform: rotateX(90deg);

            transform: rotateX(90deg);

    pointer-events: initial;

  }

  40.001%, 50%, 60% {

    -webkit-transform: rotateX(180deg);

            transform: rotateX(180deg);

    pointer-events: initial;

  }

  65.001%, 75%, 85% {

    -webkit-transform: rotateX(270deg);

            transform: rotateX(270deg);

    pointer-events: initial;

  }

  90.001%, 100% {

    -webkit-transform: rotateX(360deg);

            transform: rotateX(360deg);

    pointer-events: initial;

  }

}