Cards Carousel on 3D Cube - CSS Only

cards-carousel-on-3d-cube-css-only.markdown

Cards Carousel on 3D Cube - CSS Only

3D Cube with cards on each face. CSS only checkbox hack for rotations.

A Pen by MOZZARELLA on CodePen.

License.

index.html

<div class="container-3D">

  <input type="radio" id="swap-left-front" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-front" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-front" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-front" name="swapper" value="swap-down">
  <input type="radio" id="swap-left-back" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-back" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-back" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-back" name="swapper" value="swap-down">
  <input type="radio" id="swap-left-top" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-top" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-top" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-top" name="swapper" value="swap-down">
  <input type="radio" id="swap-left-bottom" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-bottom" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-bottom" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-bottom" name="swapper" value="swap-down">
  <input type="radio" id="swap-left-left" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-left" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-left" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-left" name="swapper" value="swap-down">
  <input type="radio" id="swap-left-right" name="swapper" value="swap-left">
  <input type="radio" id="swap-right-right" name="swapper" value="swap-right">
  <input type="radio" id="swap-up-right" name="swapper" value="swap-up">
  <input type="radio" id="swap-down-right" name="swapper" value="swap-down">
  <div class="flopper">

    <figure class="back">

      <label for="swap-left-back">&#8592;</label>
      <label for="swap-right-back">&#8594;</label>
      <label for="swap-up-back">&#8593;</label>
      <label for="swap-down-back">&#8595;</label>

      <div></div>

      <h2>Palace</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
    <figure class="top">

      <label for="swap-left-top">&#8592;</label>
      <label for="swap-right-top">&#8594;</label>
      <label for="swap-up-top">&#8593;</label>
      <label for="swap-down-top">&#8595;</label>

      <div></div>

      <h2>Tools</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
    <figure class="bottom">

      <label for="swap-left-bottom">&#8592;</label>
      <label for="swap-right-bottom">&#8594;</label>
      <label for="swap-up-bottom">&#8593;</label>
      <label for="swap-down-bottom">&#8595;</label>

      <div></div>

      <h2>Clouds</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
    <figure class="left">

      <label for="swap-left-left">&#8592;</label>
      <label for="swap-right-left">&#8594;</label>
      <label for="swap-up-left">&#8593;</label>
      <label for="swap-down-left">&#8595;</label>

      <div></div>

      <h2>Birds</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
    <figure class="right">

      <label for="swap-left-right">&#8592;</label>
      <label for="swap-right-right">&#8594;</label>
      <label for="swap-up-right">&#8593;</label>
      <label for="swap-down-right">&#8595;</label>

      <div></div>

      <h2>Concert</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
    <figure class="front">

      <label for="swap-left-front">&#8592;</label>
      <label for="swap-right-front">&#8594;</label>
      <label for="swap-up-front">&#8593;</label>
      <label for="swap-down-front">&#8595;</label>

      <div></div>

      <h2>Big Water</h2>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

      <a href="javascript:void(0);" title="Learn More">Learn More</a>

    </figure>
  </div>

</div>

style.css

*,
*::before,
*::after {
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transform-style: preserve-3d;
}

body,
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 12pt;
  line-height: 18pt;
  font-weight: 400;
  color: white;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #444;
  margin: 0;
}

.container-3D {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
}

.flopper {
  position: relative;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible;
  transition: all 0.5s ease-in-out;
  /*animation: rotate 6s linear infinite;*/
}

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 300px;
  height: 300px;
  transform-origin: 50% 50%;
  padding: 20px 25px;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
    rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
    rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  border: 1px solid white;
}

figure div {
  width: 100%;
  height: 100px;
  background: url("https://picsum.photos/id/237/1280/720");
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.front div {
  background: url("https://picsum.photos/id/404/1280/720");
}

.left div {
  background: url("https://picsum.photos/id/611/1280/720");
}

.right div {
  background: url("https://picsum.photos/id/117/1280/720");
}

.back div {
  background: url("https://picsum.photos/id/142/1280/720");
}

.bottom div {
  background: url("https://picsum.photos/id/888/1280/720");
}

.top div {
  background: url("https://picsum.photos/id/491/1280/720");
}

figure h2 {
  font-size: 20pt;
  line-height: 20pt;
  margin: 20px 0px 10px 0px;
}

figure p {
  font-size: 12pt;
  line-height: 18pt;
  margin: 0 0 15px 0;
  text-align: center;
}

figure a {
  position: relative;
  width: 130px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  color: black;
  text-decoration: none;
  z-index: 1;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

figure a::after {
  position: absolute;
  content: "";
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}

figure a:hover::after {
  bottom: 0;
  transition: all 0.3s ease-in-out;
}

figure a:hover {
  color: white;
  transition: all 0.3s ease-in-out;
}

.front {
  transform: translateZ(150px);
  background: #1be7ff;
  --face_color: #1be7ff;
}

.back {
  transform: rotateY(180deg) translateZ(150px);
  background: #6eeb83;
  --face_color: #6eeb83;
}

.top {
  transform: rotateX(90deg) translateZ(150px);
  background: #e4ff1a;
  --face_color: #e4ff1a;
}

.bottom {
  transform: rotateX(-90deg) translateZ(150px);
  background: #e8aa14;
  --face_color: #e8aa14;
}

.left {
  transform: rotateY(-90deg) translateZ(150px);
  background: #ff5714;
  --face_color: #ff5714;
}

.right {
  transform: rotateY(90deg) translateZ(150px);
  background: black;
  --face_color: black;
}

.front h2,
.front p,
.back h2,
.back p,
.top h2,
.top p,
.bottom h2,
.bottom p {
  color: black;
}

.front a,
.back a,
.top a,
.bottom a {
  background: black;
  color: white;
}

.front a::after,
.back a::after,
.top a::after,
.bottom a::after {
  background: white;
}

.front a:hover,
.back a:hover,
.top a:hover,
.bottom a:hover {
  color: black;
}

label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--face_color);
  color: black;
  font-size: 14pt;
  margin: 0;
  padding: 0;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

label:hover {
  cursor: pointer;
}

label:nth-child(1) {
  left: -55px;
  padding-bottom: 5px;
}

label:nth-child(2) {
  right: -55px;
  padding-bottom: 5px;
}

label:nth-child(3) {
  top: -55px;
}

label:nth-child(4) {
  bottom: -55px;
}

.right label {
  color: white;
}

.left label {
  color: white;
}

#swap-left-front:checked ~ .flopper {
  transform: rotateY(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-front:checked ~ .flopper {
  transform: rotateY(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-front:checked ~ .flopper {
  transform: rotateX(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-front:checked ~ .flopper {
  transform: rotateX(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-left-back:checked ~ .flopper {
  transform: rotateY(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-back:checked ~ .flopper {
  transform: rotateY(-270deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-back:checked ~ .flopper {
  transform: rotateX(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-back:checked ~ .flopper {
  transform: rotateX(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-left-top:checked ~ .flopper {
  transform: rotateY(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-top:checked ~ .flopper {
  transform: rotateY(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-top:checked ~ .flopper {
  transform: rotateY(-180deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-top:checked ~ .flopper {
  transform: rotateX(0deg);
  transition: all 0.5s ease-in-out;
}

#swap-left-bottom:checked ~ .flopper {
  transform: rotateY(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-bottom:checked ~ .flopper {
  transform: rotateY(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-bottom:checked ~ .flopper {
  transform: rotateX(0deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-bottom:checked ~ .flopper {
  transform: rotateY(180deg);
  transition: all 0.5s ease-in-out;
}

#swap-left-left:checked ~ .flopper {
  transform: rotateY(180deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-left:checked ~ .flopper {
  transform: rotateY(-360deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-left:checked ~ .flopper {
  transform: rotateX(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-left:checked ~ .flopper {
  transform: rotateX(90deg);
  transition: all 0.5s ease-in-out;
}

#swap-left-right:checked ~ .flopper {
  transform: rotateY(0deg);
  transition: all 0.5s ease-in-out;
}

#swap-right-right:checked ~ .flopper {
  transform: rotateY(-180deg);
  transition: all 0.5s ease-in-out;
}

#swap-up-right:checked ~ .flopper {
  transform: rotateX(-90deg);
  transition: all 0.5s ease-in-out;
}

#swap-down-right:checked ~ .flopper {
  transform: rotateX(90deg);
  transition: all 0.5s ease-in-out;
}

input {
  display: none;
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(30deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(0deg);
  }
}

@media (max-height: 435px), @media (max-width: 435px) {
  figure {
    width: 250px;
    height: 250px;
  }
  .front {
    transform: translateZ(125px);
  }

  .back {
    transform: rotateY(180deg) translateZ(125px);
  }

  .top {
    transform: rotateX(90deg) translateZ(125px);
  }

  .bottom {
    transform: rotateX(-90deg) translateZ(125px);
  }

  .left {
    transform: rotateY(-90deg) translateZ(125px);
  }

  .right {
    transform: rotateY(90deg) translateZ(125px);
  }
  figure div {
    height: 80px;
  }
  figure h2 {
    font-size: 18pt;
    line-height: 18pt;
  }
  figure p {
    font-size: 11pt;
    line-height: 15pt;
  }
  figure a {
    height: 60px;
  }
  label {
    width: 30px;
    height: 30px;
    font-size: 12pt;
  }
  label:nth-child(1) {
    left: -40px;
  }

  label:nth-child(2) {
    right: -40px;
  }

  label:nth-child(3) {
    top: -40px;
  }

  label:nth-child(4) {
    bottom: -40px;
  }
}

Francissimon