DEV Community

Cover image for CSS 3D shapes
Jayesh Tembhekar ⚡
Jayesh Tembhekar ⚡

Posted on • Edited on

CSS 3D shapes

Welcome to the CSS 3D shapes folks 🐥

Yes, you can

But, How ?

Lets see our Two examples down below

Lets make a three dimensional shapes just by some CSS3 properties.


3D Cube 🥤

Some basic HTML markup below :



<body>

    <div class="container">
        <div class="cube"></div>
    </div>

</body>


Enter fullscreen mode Exit fullscreen mode

Now the real magic 🎃 happens with this CSS3 code below :



  .container
    {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50% , -50%);
    }

   .cube
    {
        background: #dc2e2e;
        width: 100px;
        height: 100px;
        position: relative;
        margin: 50px;
    }

   .cube::before
    {
        content: '';
        display: inline-block;
        background: #f15757;
        width: 100px;
        height: 20px;
        transform: skewX(-40deg);
        position: absolute;
        top: -20px;
        left: 8px;
    }

   .cube::after
    {
        content: '';
        display: inline-block;
        background: #9e1515;
        width: 16px;
        height: 100px;
        transform: skewY(-50deg);
        position: absolute;
        top: -10px;
        left: 100%;
    }


Enter fullscreen mode Exit fullscreen mode

Uffff 😓

Thats a lot of code...

Atlast, you will see a cube like this 👇

3D cube


3D Pyramid 🔱

Some basic HTML markup below :



<body>

    <div class="container">
        <div class="pyramid"></div>
    </div>

</body>


Enter fullscreen mode Exit fullscreen mode

Now, magical CSS3 in action :



  .container
    {
        position: absolute;
        left: 50%;
        top: 35%;
        transform: translate(-50px , -35px);
    }

  .pyramid
    {
        width: 100px;
        height: 200px;
        position: relative;
        margin: 50px;
    }

  .pyramid::before, .pyramid::after
    {
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border: 50px solid;
        position: absolute;
    }

  .pyramid::before
    {
        border-color: transparent transparent #7700ff transparent;
        transform: scaleY(2) skewY(-40deg) rotate(45deg);
    }

  .pyramid::after
    {
        border-color: transparent transparent #5500b6 transparent;
        transform: scaleY(2) skewY(40deg) rotate(-45deg);
    }


Enter fullscreen mode Exit fullscreen mode

Pyramid will look like this 👇

3D Pyramid




🥂🥳

We did it, 3D shapes are looking 🔥

Thank you Devs for hanging out.
Now, go & roll out your editors & make some ❄ shapes.
Till then see you in the next post 📮

Also do check my previous posts

Author:
Instagram ➡ Jayesh.2112 💝
Twitter ➡ Developer_Codes 💙

Top comments (0)