Building an Amazing Birthday Card with CSS 3D Effects

In this tutorial, we’ll create a beautiful birthday card using HTML and CSS, incorporating 3D effects to give it a unique and interactive feel. The card will have a front and back side, with a rotating outer layer to reveal the back side when hovered over.

HTML Structure

Our HTML structure is simple, consisting of a main div with a class of .card. Inside this div, we have another div with a class of .outside, which acts as the outer rotating layer. Inside .outside, we have two more divs: .front and .back-side, representing the front and back sides of the card respectively.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Birthday Card</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="card">
      <div class="outside">
        <div class="front">
          <p>Happy Birthday</p>
          <div class="cake">
            <div class="cake-top"></div>
            <div class="cake-middle"></div>
            <div class="cake-bottom"></div>
            <div class="candle"></div>
          </div>
        </div>
        <div class="back-side"></div>
      </div>
      <div class="inner-content">
        <p>Wishing you a very happy birthday filled with love and laughter</p>
        <h1>🎁</h1>
      </div>
    </div>
  </body>
</html>

HTML

CSS Styling

Let’s dive into the CSS to style our birthday card and add the 3D effects.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #0D0D0D;
}
.card {
  width: 640px;
  height: 400px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-perspective: 1200px;
  perspective: 1200px;
  transition: 1s;
}
.card:hover {
  transform: rotate(-5deg);
}
.card:hover .outside {
  transform: rotateY(-130deg);
}
.outside,
.inner-content {
  height: 100%;
  width: 50%;
  position: absolute;
  left: 50.1%;
}
.inner-content {
  background: linear-gradient(to right, #e7e7e7, #ffffff 30%);
  line-height: 3;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  left: 50%;
}
.outside {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1;
  transform-origin: left;
  transition: 2s;
  cursor: pointer;
}
.front,
.back-side {
  height: 100%;
  width: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateX(0deg);
}
.front {
  background-color: #ffffff;
}
.back-side {
  transform: rotateY(180deg);
  background: linear-gradient(to left, #e7e7e7, #ffffff 30%);
}
.cake {
  width: 100%;
  position: absolute;
  bottom: 30px;
}
.cake-top,
.cake-middle,
.cake-bottom {
  height: 80px;
  width: 240px;
  background-repeat: repeat;
  background-size: 60px 100px;
  background-position: 28px 0;
  background-image: linear-gradient(
      transparent 50px,
      #fedbab 50px,
      #fedbab 60px,
      transparent 60px
    ),
    radial-gradient(circle at 30px 5px, #994c10 30px, #fcbf29 31px);
  border-radius: 10px 10px 0 0;
  position: relative;
  margin: auto;
}
.cake-middle {
  transform: scale(0.85);
  top: 6px;
}
.cake-top {
  transform: scale(0.7);
  top: 26px;
}
.candle {
  height: 45px;
  width: 15px;
  background: repeating-linear-gradient(
    45deg,
    #fd3018 0,
    #fd3018 5px,
    #ffa89e 5px,
    #ffa89e 10px
  );
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 202px;
}
.candle:before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  background-color: #ffa500;
  border-radius: 0 50% 50% 50%;
  bottom: 48px;
  transform: rotate(45deg);
  left: -1px;
}
.outside p {
  font-size: 23px;
  text-transform: uppercase;
  margin-top: 30px;
  text-align: center;
  letter-spacing: 6px;
  color: #000046;
}
.inner-content h1 {
  font-size: 120px;
  line-height: 120px;
}

CSS

Explanation:

*: Global reset for padding, margin, and box-sizing.
.card: Styles for the main card container.
.outside and .inner-content: Styling for the outer rotating layer and inner content respectively.
.front and .back-side: Styles for the front and back sides of the card.
.cake and .candle: Styles for the birthday cake and candle on the card.

JavaScript (Optional)

Currently, the example doesn’t include JavaScript, but you can easily add interactivity using JavaScript to make the card more dynamic. For example, you could add a hover effect to rotate the outer layer and reveal the back side, or even add a button to toggle between the front and back sides.

Conclusion

That’s it! You’ve successfully created a beautiful and interactive birthday card using HTML and CSS. The card features a rotating outer layer to reveal a heartfelt message and a festive birthday cake. Feel free to customize and add more features to this project to make it truly unique!

Happy Coding!