3D Rotating Cards Display

INFORMATION & CODE

Rotating 3D Cards display

What the Code Does

The code creates an interactive 3D-style rotating information card using HTML, CSS, and JavaScript. The HTML provides the structure: a main heading, an instruction paragraph, and a card made from two layers. The .back-wrapper contains the image, while the .front-wrapper contains the title and descriptive text. Clicking the front of the card hides it so the image underneath can be seen; clicking the image brings the text layer back.

How the Code Works

The CSS controls the card's appearance and animation. The .wrapper creates the main card area, while the two wrapper elements are positioned on top of each other. The @keyframes bkgd and @keyframes frnt animations repeatedly rotate and skew the image and text layers in opposite directions, creating the illusion of a moving or rotating card. The box-shadow changes during the animation to enhance the 3D effect.

The JavaScript calculates the card's dimensions when the page loads. It obtains the width of .wrapper and then uses that value to set the heights of the card and its two layers, maintaining approximately a 4:3 proportion. The frontAction() function hides the text layer when the front is clicked, revealing the image. The backAction() function makes the text layer visible again when the image is clicked.

How to Use the Code

To use the component, place the HTML in your webpage, put the CSS in styles.css, and put the JavaScript in scripts.js. Replace the Google Drive image URL in .back-wrapper with the URL of your own image if required. You can also change the <h2> and <p> content to display your own message. The user interaction is simple: click the text/card to reveal the image, then click the image to reveal the text again.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Rotating Cards Display</title>
    <link rel="stylesheet"  href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="card-body">
      <h1>3D Rotating Information Cards</h1>
      <p class="p">Click on the card to see the image then click on the image to view the text.</p>
      <div class="wrapper">
        <div class="back-wrapper" onclick="backAction()"></div>
        <div class="front-wrapper" onclick="frontAction()">
          <h2 id="title">3D Rotating Cards</h2>
          <p id="para">How about using these rotating cards to get your message across to your readers in an eyecatching way.</p>
        </div>      
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                     
      *, html {
        box-sizing: border-box;
      }
      body {
        height: 98vh;
        padding: 10px;
        background: linear-gradient(#00f, #0ff, #7ff, #cff, #cff, #7ff, #0ff, #00f);
        background-size: 200% 100%;
        background-repeat: no-repeat;
      }
      .wrapper {
        width: 100%;
        min-width: 330px;
        max-width: 400px;
        margin: 10vh auto 0 auto;
        padding: 0 50px;
        background-color: #ffc;
        border: 2px solid #fa0;
        border-radius: 12px;
        box-shadow: 5px 5px 20px #555;
      }
      .back-wrapper {
        position: relative;
        top: 15.5%;
        width: 100%;
        visibility: visible;
        background-color: #cfc;
        background-image: url("https://drive.google.com/uc?id=1xCHiTQAnmEsKRTNYv12BR3FCR-q-8dAI");
        background-size: cover;
        background-repeat: no-repeat;
        border: 2px solid #7c7;
        border-radius: 6px;
        animation: bkgd 5s linear infinite;
      }
      @keyframes bkgd {
        0% { transform: rotatez(0deg) skew(0deg); box-shadow: none; }
        25% { transform: rotatez(-11deg) skew(-10deg); box-shadow: -1px -1px #7c7, -2px -2px #7c7,
          -3px -3px #7c7, -4px -4px #7c7, -5px -5px #7c7 }
        50% {  transform: rotatez(0deg) skew(0deg); box-shadow: none; }
        75% { transform: rotatez(11deg) skewy(10deg); box-shadow: 1px -1px #7c7, 2px -2px #7c7,
          3px -3px #7c7, 4px -4px #7c7, 5px -5px #7c7 }
        100% { transform: rotatez(0deg) skew(0deg); box-shadow: none; }
      }
      .front-wrapper {
        position: relative;
        top: -51.5%;
        left: -2px;
        visibility: visible;
        width: calc(100% + 4px);
        padding: 0 10px;
        background-color: rgba(255,175,255, 0.6);
        border: 2px solid #707;
        border-radius: 6px;
        animation: frnt 5s linear infinite;
      }
      @keyframes frnt {
        0% { transform: rotatez(0deg) skew(0deg); box-shadow: none; }
        25% { transform: rotatez(12.5deg) skew(12.5deg); box-shadow: 1px -1px #707, 2px -2px #707,
          3px -3px #707, 4px -4px #707, 5px -5px #707 }
        50% {  transform: rotatez(0deg) skew(0deg); box-shadow: none; }
        75% { transform: rotatez(-12.5deg) skew(-12.5deg); box-shadow: -1px -1px #707, -2px -2px #707,
          -3px -3px #707, -4px -4px #707, -5px -5px #707}
        100% { transform: rotatez(0deg) skew(0deg); box-shadow: none; }
      }
      h1 {
        color: #fff;
        text-shadow: -2px -2px #000;
        text-align: center;
      }
      h2 {
        position: relative;
        top: 3vh;
        color: #707;
        font-size: 20px;
        text-shadow: 0px 0px 2px #fa0;
        text-align: center;
      }
      p {
        position: relative;
        top: 3vh;
        color: #505;
        font-size: 14px;
        text-align: center;
      }

JAVASCRIPT


                var wrap = document.querySelector(".wrapper");
var backwrap = document.querySelector(".back-wrapper");
var frontwrap = document.querySelector(".front-wrapper");
let width = wrap.offsetWidth;
let height = backwrap.offsetWidth;
      
wrap.style.height = (width / 4) * 3  + "px";
backwrap.style.height = (width / 4) * 2 + "px";
frontwrap.style.height = (width / 4) * 2 + "px";
      
function frontAction() {
  frontwrap.style.visibility = "hidden";
}
function backAction() {
  frontwrap.style.visibility = "visible";
}

MENU