3D CSS Logo with Pure CSS

Share your love

Elevate your brand with a stunning 3D logo created entirely using HTML and CSS! In this blog, we’ll explore how to craft a sleek and dynamic logo with depth and dimension, all without relying on images or external libraries. By using CSS 3D transforms, animations, gradients, and shadows, we’ll bring your logo to life, adding a modern touch to your web projects. Whether you’re designing a logo for your portfolio, business, or personal project, this tutorial will show you how to use CSS to create a visually engaging and interactive logo. Let’s dive in and start building your 3D masterpiece!

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

See the Pen CSS in 3D in CSS by Amit Sheen (@amit_sheen) on CodePen.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

</body>

</html>

Paste the below code in your <body> tag.

<div class="scene">
  <div class="logo">
    <div class="dark">
      <div class="front"></div>
      <div class="front"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="light">
      <div class="front"></div>
      <div class="front"></div>
    </div>
    <div class="three">
      <div class="front"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
    <div class="three">
      <div class="front"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
      <div class="side"></div>
    </div>
  </div>
</div>

CSS Code 

Create a file style.css and paste the code below.

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #111;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
}

*:not(:empty) {
  transform-style: preserve-3d;
}

.scene {
  position: relative;
  animation: sceneSwing 10s infinite ease-in-out alternate;

  @keyframes sceneSwing {
    from { transform: rotateX(30deg); }
    to { transform: rotateX(-30deg); }
  }
}

.logo {
  position: absolute;
  animation: logoRotate 12s infinite linear;
  @keyframes logoRotate {
    to { transform: rotateY(360deg); }
  }
}

.dark {
  position: absolute;
  background-color: #fff7;

  & > * {
    position: absolute;
    background-color: #1471b6;
    box-shadow: 0 0 20px #000a inset;
  }

  .front {
    width: 300px; height: 340px;
    clip-path: polygon(50% 0, 0 0, 9% 90%, 50% 100%, 50% 0, 100% 0, 91% 90%, 50% 100%, 50% 92%, 83% 84%, 91% 7%, 50% 7%);
    background-image: radial-gradient(#0000, 75%, #0007);
    &:nth-child(1) { transform: translate(-50%, -50%) translateZ(15px); }
    &:nth-child(2) { transform: translate(-50%, -50%) rotateY(180deg) translateZ(15px); }
  }

  .side {
    height: 30px;

    &:nth-child(3) {
      left: -150px; top: -185px;
      width: 300px;
      transform: rotateX(90deg);
    }
    &:nth-child(4) {
      left: -150px; top: -185px;
      width: 307px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
    &:nth-child(5) {
      right: -150px; top: -185px;
      width: 307px;
      transform-origin: right;
      transform: rotateX(90deg) rotateY(-85deg);
    }
    &:nth-child(6) {
      right: 0px; bottom: -185px;
      width: 128px;
      transform-origin: right;
      transform: rotateX(90deg) rotateY(15.5deg);
    }
    &:nth-child(7) {
      right: 0px; bottom: -185px;
      width: 128px;
      transform-origin: right;
      transform: rotateX(90deg) rotateY(164.5deg);
    }
    &:nth-child(8) {
      left: 0px; top: -161px;
      width: 123px;
      transform: rotateX(90deg);
    }
    &:nth-child(9) {
      left: 0px; top: -161px;
      width: 289px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(90deg);
    }
    &:nth-child(10) {
      left: 0px; top: 128px;
      width: 103px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-15.5deg);
    }
    &:nth-child(11) {
      left: 123px; top: -162px;
      width: 264px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(95deg);
    }
    &:nth-child(12) {
      left: -123px; top: -161px;
      width: 123px;
      transform: rotateX(90deg);
    }
    &:nth-child(13) {
      left: -123px; top: -162px;
      width: 264px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
    &:nth-child(14) {
      left: 0px; top: 128px;
      width: 103px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-164.5deg);
    }
  }
}

.light {
  position: absolute;
  background-color: #fff7;

  & > * {
    position: absolute;
    background-color: #33a8db;
    box-shadow: 0 0 20px #000a inset;
  }

  .front {
    width: 300px; height: 340px;
    clip-path: polygon(50% 92%, 83% 84%, 91% 7%, 50% 7%);
    background-image: radial-gradient(at 68% 50%, #0000, #0007 70%);
    &:nth-child(1) { transform: translate(-50%, -50%) translateZ(10px); }
    &:nth-child(2) { transform: translate(-50%, -50%) rotateY(180deg) translateZ(10px); }
  }
}

.three {

  &:nth-child(3) { transform: translateZ(15px); }
  &:nth-child(4) { transform: rotateY(180deg) translateZ(15px); }

  & > * {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 20px #0005 inset;
  }

  .front {
    width: 300px; height: 340px;
    clip-path: polygon(18.5% 17.5%, 81.5% 17.5%, 76% 74%, 50% 80.5%, 24% 74%, 22.3% 56.5%, 35% 56.5%, 36% 65%, 50% 68.5%, 64% 65%, 65.5% 51%, 36% 51%, 35% 40%, 66.5% 40%, 67.6% 28.5%, 19.5% 28.5%);
    background-image: radial-gradient(#0000, #0007 75%);
    transform: translate(-50%, -50%) translateZ(10px);
  }

  .side {
    height: 20px;

    &:nth-child(2) {
      left: -94.5px; top: -120.5px;
      width: 189px;
      transform: rotateX(90deg);
    }
    &:nth-child(3) {
      left: 94.5px; top: -120.5px;
      width: 193.5px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(95deg);
    }
    &:nth-child(4) {
      left: 0px; bottom: -113.5px;
      width: 81px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-15.5deg);
    }
    &:nth-child(5) {
      left: 0px; bottom: -113.5px;
      width: 81px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-164.5deg);
    }
    &:nth-child(6) {
      left: -83px; top: 12px;
      width: 60.5px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
    &:nth-child(7) {
      left: -83px; top: 12px;
      width: 38px;
      transform: rotateX(90deg);
    }
    &:nth-child(8) {
      left: -45px; top: 12px;
      width: 29.5px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
    &:nth-child(9) {
      left: 0px; bottom: -73px;
      width: 44.5px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-164.5deg);
    }
    &:nth-child(10) {
      left: 0px; bottom: -73px;
      width: 44.5px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(-15.5deg);
    }
    &:nth-child(11) {
      left: 46.5px; top: -6.7px;
      width: 48px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(95deg);
    }
    &:nth-child(12) {
      left: -42px; top: -6.7px;
      width: 88.5px;
      transform: rotateX(90deg);
    }
    &:nth-child(13) {
      left: -45px; top: -44px;
      width: 37px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
    &:nth-child(14) {
      left: -45px; top: -44px;
      width: 95px;
      transform: rotateX(90deg);
    }
    &:nth-child(15) {
      left: 53px; top: -83.5px;
      width: 40px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(95deg);
    }
    &:nth-child(16) {
      left: -91px; top: -83.5px;
      width: 144px;
      transform: rotateX(90deg);
    }
    &:nth-child(17) {
      left: -94.5px; top: -120.5px;
      width: 37.3px;
      transform-origin: left;
      transform: rotateX(90deg) rotateY(85deg);
    }
  }
}

Final Output

Written by: Piyush Patil

Code Credits: https://codepen.io/amit_sheen/pen/QWMddVB

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖

Share your love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *