Max Headroom

Developer
Oliver Kühn
Size
3,784 Kb
Views
32,384
  1. Max Headroom Previews
  2. Max Headroom HTML Codes
  3. Max Headroom CSS Codes
  4. Max Headroom JS Codes

How do I make an max headroom?

A tribute to Max Headroom.. What is a max headroom? How do you make a max headroom? This script and codes were developed by Oliver Kühn on 15 November 2022, Tuesday.

Max Headroom Previews
IQ Test

Max Headroom - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Max Headroom</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! */ @keyframes x-spin { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); }
}
@keyframes y-spin { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); }
}
@keyframes z-spin { 0% { transform: rotateZ(0deg); } 50% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); }
}
.spin { transform-style: preserve-3d; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes invert { 0% { -webkit-filter: invert(0%); } 100% { -webkit-filter: invert(100%); }
}
@keyframes hue-rotate { 0% { -webkit-filter: hue-rotate(0deg); } 50% { -webkit-filter: hue-rotate(180deg); } 100% { -webkit-filter: hue-rotate(360deg); }
}
body { background-color: #333; margin: 0; overflow: hidden;
}
.stage { perspective: 250px; perspective-origin: 0 0; animation: hue-rotate 10s linear infinite alternate; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
}
.x-spin { animation-name: x-spin;
}
.y-spin { animation-name: y-spin;
}
.z-spin { animation-name: z-spin;
}
.object.cube { transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
.object.cube .face { width: 1000px; height: 1000px; background: linear-gradient(to bottom, #00ff00 0px, #00ff00 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 45px, #00ff00 45px, #00ff00 50px); background-size: 50px 50px; position: absolute; left: 0; top: 0;
}
.object.cube .face-1 { transform: rotateY(0deg) translate3d(-500px, -500px, 500px);
}
.object.cube .face-2 { transform: rotateY(90deg) translate3d(0px, -500px, 0px);
}
.object.cube .face-3 { transform: rotateY(180deg) translate3d(500px, -500px, 500px);
}
.object.cube .face-4 { transform: rotateY(-90deg) translate3d(0px, -500px, 1000px);
}
.object.cube .face-5 { transform: rotateX(90deg) translate3d(-500px, 0, 1000px);
}
.object.cube .face-6 { transform: rotateX(90deg) translate3d(-500px, 0px, 0px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Max Headroom -->
<div class='stage'> <div class='spin x-spin'> <div class='spin y-spin'> <div class='spin z-spin'> <div class='spin object cube'> <div class='face face-1'></div> <div class='face face-2'></div> <div class='face face-3'></div> <div class='face face-4'></div> <div class='face face-5'></div> <div class='face face-6'></div> </div> </div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Max Headroom - Script Codes CSS Codes

@keyframes x-spin { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); }
}
@keyframes y-spin { 0% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); }
}
@keyframes z-spin { 0% { transform: rotateZ(0deg); } 50% { transform: rotateZ(180deg); } 100% { transform: rotateZ(360deg); }
}
.spin { transform-style: preserve-3d; animation-duration: 10s; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes invert { 0% { -webkit-filter: invert(0%); } 100% { -webkit-filter: invert(100%); }
}
@keyframes hue-rotate { 0% { -webkit-filter: hue-rotate(0deg); } 50% { -webkit-filter: hue-rotate(180deg); } 100% { -webkit-filter: hue-rotate(360deg); }
}
body { background-color: #333; margin: 0; overflow: hidden;
}
.stage { perspective: 250px; perspective-origin: 0 0; animation: hue-rotate 10s linear infinite alternate; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
}
.x-spin { animation-name: x-spin;
}
.y-spin { animation-name: y-spin;
}
.z-spin { animation-name: z-spin;
}
.object.cube { transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
.object.cube .face { width: 1000px; height: 1000px; background: linear-gradient(to bottom, #00ff00 0px, #00ff00 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 45px, #00ff00 45px, #00ff00 50px); background-size: 50px 50px; position: absolute; left: 0; top: 0;
}
.object.cube .face-1 { transform: rotateY(0deg) translate3d(-500px, -500px, 500px);
}
.object.cube .face-2 { transform: rotateY(90deg) translate3d(0px, -500px, 0px);
}
.object.cube .face-3 { transform: rotateY(180deg) translate3d(500px, -500px, 500px);
}
.object.cube .face-4 { transform: rotateY(-90deg) translate3d(0px, -500px, 1000px);
}
.object.cube .face-5 { transform: rotateX(90deg) translate3d(-500px, 0, 1000px);
}
.object.cube .face-6 { transform: rotateX(90deg) translate3d(-500px, 0px, 0px);
}

Max Headroom - Script Codes JS Codes

// Max Headroom
Max Headroom - Script Codes
Max Headroom - Script Codes
Home Page Home
Developer Oliver Kühn
Username 0x04
Uploaded November 15, 2022
Rating 3.5
Size 3,784 Kb
Views 32,384
Do you need developer help for Max Headroom?

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!

Oliver Kühn (0x04) Script Codes
Name
X4.css Theme System
Border loading indicators
Pentagon loading indicator
Scanline effect
Background-blend-mode Test
Pure CSS Jalousien
Hover rotating cube
7 Segment Display Characters
Perforated foil
FourPerfectlyRoundCircles
Create amazing SEO content 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!