Card Carousel on 3D Cube - HTML CSS Only

Card Carousel on 3D Cube - HTML CSS Only

Card Carousel on 3D Cube - HTML CSS Only


Welcome🎉 to Code With Random blog. In this blog, we learn how to create Card Carousel. We use HTML & CSS  for Card Carousel. Hope you enjoy our blog so let's start with a basic HTML structure for the Card Carousel. 

HTML code

 <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>  
There is all HTML code for the Card Carousel. Now, you can see output without CSS, then we write CSS for the Card Carousel.
Output
Card Carousel on 3D Cube - HTML CSS Only

CSS code

 *,  
 *::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;  
  }  
 }  

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Card Carousel on 3D Cube - HTML CSS Only



Card Carousel on 3D Cube - HTML CSS Only

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Card Carousel, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Card Carousel using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - @TheMOZZARELLA

Check out more.....



Post a Comment

Previous Post Next Post