2d shape in 3d view

Developer
Dhanush Badge
Size
2,031 Kb
Views
34,408
  1. 2d shape in 3d view Previews
  2. 2d shape in 3d view HTML Codes
  3. 2d shape in 3d view CSS Codes

How do I make an 2d shape in 3d view?

Attractive packaged box left open on a glass.. What is a 2d shape in 3d view? How do you make a 2d shape in 3d view? This script and codes were developed by Dhanush Badge on 12 November 2022, Saturday.

2d shape in 3d view Previews
IQ Test

2d shape in 3d view - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>2d shape in 3d view</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='container'> <div id='lefttop'></div> <div id='leftbot'></div>
</div>
<div id='glass'></div>
</body>
</html>

2d shape in 3d view - Script Codes CSS Codes

body { margin: 0; margin-top: 100px; margin-left: 0px; background-color: black;
}
#container { width: 15%; height:50px; background-color: white; position: relative; margin: 150px auto 0 auto; cursor: pointer;
}
#leftbot { /* LEFT BOTTOM */ background: rgba(255,40,29,1); width: 100px; height: 100px; -webkit-transform: skew(0deg, 30deg); -moz-transform: skew(0deg, 30deg); -o-transform: skew(0deg, 30deg); transform: skew(0deg, 30deg);
}
#leftbot:before { /* RIGHT BOTTOM */ background: rgba(227,0,34,1); width: 100px; height: 100px; -webkit-transform: skew(0deg, -48deg); -moz-transform: skew(0deg, -48deg); -o-transform: skew(0deg, -48deg); transform: skew(0deg, -48deg); position: absolute; content: ""; margin: auto; top:-55px; left:100px;
}
#leftbot:after { /* RIGHT BOTTOM SHADOW */ background: rgba(227,0,34,0.4); width: 100px; height: 100px; -webkit-transform: skew(0deg, -48deg); -moz-transform: skew(0deg, -48deg); -o-transform: skew(0deg, -48deg); transform: skew(0deg, -48deg); position: absolute; content: ""; margin: auto; top:46px; left:100px;
}
#lefttop { /* LEFT TOP */ background: rgba(226,6,0,1); width: 100px; height: 100px; -webkit-transform: skew(0deg, -30deg); -moz-transform: skew(0deg, -30deg); -o-transform: skew(0deg, -30deg); transform: skew(0deg, -30deg); position: absolute; margin: auto; top:-57px; left:0;
}
#lefttop:after { /* RIGHT TOP */ background-color: Orangered; width: 100px; height: 100px; -webkit-transform: skew(0deg, 50deg); -moz-transform: skew(0deg, 50deg); -o-transform: skew(0deg, 50deg); transform: skew(0deg, 50deg); position: absolute; content: ""; margin: auto; top:60px; left:100px;
}
#lefttop:before { /* LEFT BOTTOM SHADOW */ background: rgba(255,40,29,0.2); width: 100px; height: 100px; -webkit-transform: skew(0deg, 49deg); -moz-transform: skew(0deg, 49deg); -o-transform: skew(0deg, 49deg); transform: skew(0deg, 49deg); position: absolute; content: ""; margin: auto; top:158px; left:0px;
}
#glass { width:400px; height:200px; padding:0px; background-color: rgba(245,245,220,0.05); position: absolute; left: 450px; top: 145px; -webkit-transform: skew(-60deg, 31deg); -moz-transform: skew(-60deg, 31deg); -o-transform: skew(-60deg, 31deg); transform: skew(-60deg, 31deg); z-index:-1;
}
2d shape in 3d view - Script Codes
2d shape in 3d view - Script Codes
Home Page Home
Developer Dhanush Badge
Username dhanushbadge
Uploaded November 12, 2022
Rating 3.5
Size 2,031 Kb
Views 34,408
Do you need developer help for 2d shape in 3d view?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dhanush Badge (dhanushbadge) Script Codes
Name
JQuery animate function
Html5 output
CSS3 Window
Show hide div on radio button
How I learned jQuery - Hide Function
Jochaho Skeleton
JQuery show hide slide div
Html5 keygen
Circular Avatar
Shoot the text
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!