Posted on Mar 10, 2020 • Edited on Oct 9, 2020

CSS 3D shapes

#html #css #beginners #javascript

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>

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%; }

Uffff 😓

Thats a lot of code...

Atlast, you will see a cube like this 👇

3D Pyramid 🔱

Some basic HTML markup below :

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

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); }