Single element shaded cube
How do I make an single element shaded cube?
A 6 sided cube created from a single element and two pseudo-elements. As it's only possible to see 3 faces of a cube at any one time we don't need to worry about creating the backfaces, they can be faked using scaleX(-1), scaleY(-1) and scaleZ(-1) during the rotation animation.. What is a single element shaded cube? How do you make a single element shaded cube? This script and codes were developed by Keith Clark on 12 August 2022, Friday.
Single element shaded cube - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single element shaded cube</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! */ html, body { height: 100%;
}
body { background: #333; perspective: 400px;
}
.cube { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin: -75px; transform-origin: 50% 50% 75px; animation: 5s spinXY linear infinite, 5s shade linear infinite; transform-style: preserve-3d;
}
.cube:before, .cube:after { content: ""; position: absolute; width: inherit; height: inherit;
}
.cube:before { transform: translateX(75px) translateZ(75px) rotateY(90deg); animation: 5s -3.33333s shade linear infinite;
}
.cube:after { transform: translateY(-75px) translateZ(75px) rotateX(90deg); animation: 5s -1.66667s shade linear infinite;
}
@keyframes spinXY { 0% { transform: rotateY(-90deg) rotateX(90deg) scaleZ(-1); } 24.999% { transform: rotateY(-180deg) rotateX(180deg) scaleZ(-1); } 25% { transform: rotateY(180deg) rotateX(-180deg) scaleX(-1) scaleY(-1) scaleZ(-1); } 49.999% { transform: rotateY(90deg) rotateX(-90deg) scaleX(-1) scaleY(-1) scaleZ(-1); } 50% { transform: rotateY(-90deg) rotateX(90deg); } 74.999% { transform: rotateY(-180deg) rotateX(0deg); } 75% { transform: rotateY(180deg) rotateX(0deg) scaleX(-1) scaleY(-1); } 100% { transform: rotateY(90deg) rotateX(-90deg) scaleX(-1) scaleY(-1); }
}
@keyframes shade { 0%, 50%, 100% { background-color: #1b2232; } 25%, 75% { background-color: #b3ccff; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="cube"></div>
</body>
</html>
Single element shaded cube - Script Codes CSS Codes
html, body { height: 100%;
}
body { background: #333; perspective: 400px;
}
.cube { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin: -75px; transform-origin: 50% 50% 75px; animation: 5s spinXY linear infinite, 5s shade linear infinite; transform-style: preserve-3d;
}
.cube:before, .cube:after { content: ""; position: absolute; width: inherit; height: inherit;
}
.cube:before { transform: translateX(75px) translateZ(75px) rotateY(90deg); animation: 5s -3.33333s shade linear infinite;
}
.cube:after { transform: translateY(-75px) translateZ(75px) rotateX(90deg); animation: 5s -1.66667s shade linear infinite;
}
@keyframes spinXY { 0% { transform: rotateY(-90deg) rotateX(90deg) scaleZ(-1); } 24.999% { transform: rotateY(-180deg) rotateX(180deg) scaleZ(-1); } 25% { transform: rotateY(180deg) rotateX(-180deg) scaleX(-1) scaleY(-1) scaleZ(-1); } 49.999% { transform: rotateY(90deg) rotateX(-90deg) scaleX(-1) scaleY(-1) scaleZ(-1); } 50% { transform: rotateY(-90deg) rotateX(90deg); } 74.999% { transform: rotateY(-180deg) rotateX(0deg); } 75% { transform: rotateY(180deg) rotateX(0deg) scaleX(-1) scaleY(-1); } 100% { transform: rotateY(90deg) rotateX(-90deg) scaleX(-1) scaleY(-1); }
}
@keyframes shade { 0%, 50%, 100% { background-color: #1b2232; } 25%, 75% { background-color: #b3ccff; }
}
Developer | Keith Clark |
Username | keithclark |
Uploaded | August 12, 2022 |
Rating | 3.5 |
Size | 3,171 Kb |
Views | 48,576 |
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!
Name | Size |
Single element pure CSS 3D starfield | 7,338 Kb |
One element CSS Snow | 4,066 Kb |
3D objects in CSS | 3,080 Kb |
Faking gradient transitions | 1,983 Kb |
Zero-element 3d css corridor | 2,713 Kb |
Zero element CSS tunnel | 3,099 Kb |
Styling the last row of a grid with CSS selectors | 3,263 Kb |
3D objects in CSS with shading | 3,319 Kb |
Pure CSS carousel that preserves history | 2,834 Kb |
CSS shaded cubes | 2,941 Kb |
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!
Name | Username | Size |
Css color for svg | Ademilter | 2,392 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
SlideDown FixedMenu | Mp_graphic | 5,602 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
The Rope | Chribbe | 2,886 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!