CSS Only Single-Element 3D Cuboid

Developer
Assaf Gelber
Size
2,913 Kb
Views
10,120
  1. CSS Only Single-Element 3D Cuboid Previews
  2. CSS Only Single-Element 3D Cuboid HTML Codes
  3. CSS Only Single-Element 3D Cuboid CSS Codes

How do I make an css only single-element 3d cuboid?

Cuboid made using only one div with the before and after selectors and skew. Updated to include configurable values with the help of SASS.. What is a css only single-element 3d cuboid? How do you make a css only single-element 3d cuboid? This script and codes were developed by Assaf Gelber on 03 January 2023, Tuesday.

CSS Only Single-Element 3D Cuboid Previews
IQ Test

CSS Only Single-Element 3D Cuboid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Only Single-Element 3D Cuboid</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { text-align: center; text-align: center; font-family: "Arial";
}
h1 { text-transform: uppercase;
}
.cuboid { width: 200px; height: 200px; margin: 50px 20px; background-color: #ccc; position: relative; display: inline-block;
}
.cuboid-lb:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: -20px; top: 10px; transform: skew(0, -45deg);
}
.cuboid-lb:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: 100%; left: -10px; transform: skew(-45deg);
}
.cuboid-lt:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: -20px; top: -10px; transform: skew(0, 45deg);
}
.cuboid-lt:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: -20px; left: -10px; transform: skew(45deg);
}
.cuboid-rb:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: 100%; top: 10px; transform: skew(0, 45deg);
}
.cuboid-rb:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: 100%; left: 10px; transform: skew(45deg);
}
.cuboid-rt:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: 100%; top: -10px; transform: skew(0, -45deg);
}
.cuboid-rt:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: -20px; left: 10px; transform: skew(-45deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1> css only single-element cuboids
</h1>
<div class='cuboid cuboid-lb'></div>
<div class='cuboid cuboid-lt'></div>
<div class='cuboid cuboid-rb'></div>
<div class='cuboid cuboid-rt'></div>
<h4> (Try playing around with the SASS variables in the first 4 lines)
</h4>
</body>
</html>

CSS Only Single-Element 3D Cuboid - Script Codes CSS Codes

body { text-align: center; text-align: center; font-family: "Arial";
}
h1 { text-transform: uppercase;
}
.cuboid { width: 200px; height: 200px; margin: 50px 20px; background-color: #ccc; position: relative; display: inline-block;
}
.cuboid-lb:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: -20px; top: 10px; transform: skew(0, -45deg);
}
.cuboid-lb:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: 100%; left: -10px; transform: skew(-45deg);
}
.cuboid-lt:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: -20px; top: -10px; transform: skew(0, 45deg);
}
.cuboid-lt:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: -20px; left: -10px; transform: skew(45deg);
}
.cuboid-rb:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: 100%; top: 10px; transform: skew(0, 45deg);
}
.cuboid-rb:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: 100%; left: 10px; transform: skew(45deg);
}
.cuboid-rt:before { content: ""; height: 200px; width: 20px; background-color: #b3b3b3; position: absolute; left: 100%; top: -10px; transform: skew(0, -45deg);
}
.cuboid-rt:after { content: ""; width: 200px; height: 20px; background-color: #999999; position: absolute; top: -20px; left: 10px; transform: skew(-45deg);
}
CSS Only Single-Element 3D Cuboid - Script Codes
CSS Only Single-Element 3D Cuboid - Script Codes
Home Page Home
Developer Assaf Gelber
Username agelber
Uploaded January 03, 2023
Rating 3.5
Size 2,913 Kb
Views 10,120
Do you need developer help for CSS Only Single-Element 3D Cuboid?

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!

Assaf Gelber (agelber) Script Codes
Name
Interactive CSS 3D Transform
CSS Animated Bio Card
Posting Animation
Pure CSS Image Gallery
Perspective Demo
Carousel Tutorial Demo
Text Looping Transition
Rotate Demo
ScaleZ Demo
Simple Night Sky
Create amazing blog posts 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!