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);
}
Pyramid will look like this 👇
🥂🥳
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)