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)