CSS Revolving Door
How do I make an css revolving door?
What is a css revolving door? How do you make a css revolving door? This script and codes were developed by Bramus on 23 July 2022, Saturday.
CSS Revolving Door - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Revolving Door</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="camera"> <div class="door"> <div class="doorpanel"></div> <div class="doorpanel"></div> <div class="doorpanel"></div> </div>
</div>
</body>
</html>
CSS Revolving Door - Script Codes CSS Codes
.camera { width: 100%; heigth: 100%; background: #808080;
}
.door { position: relative; width: 100%; height: 100vh; perspective: 600px; overflow: visible; transform: rotateX(12deg); transform-origin: 50% 50%; transform-style: preserve-3d;
}
.doorpanel { width: 8em; height: 12.88em; background: #f00; position: absolute; left: 50%; top: 50%; transform-origin: 0 0;
}
.doorpanel:nth-child(1) { transform: rotateY(0deg); -webkit-animation: door1 5s linear infinite;
}
.doorpanel:nth-child(2) { background: #00f; transform: rotateY(120deg); -webkit-animation: door2 5s linear infinite;
}
.doorpanel:nth-child(3) { background: #0f0; transform: rotateY(240deg); -webkit-animation: door3 5s linear infinite;
}
@-moz-keyframes door1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); }
}
@-webkit-keyframes door1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); }
}
@-o-keyframes door1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); }
}
@keyframes door1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); }
}
@-moz-keyframes door2 { 0% { transform: rotateY(120deg); } 100% { transform: rotateY(480deg); }
}
@-webkit-keyframes door2 { 0% { transform: rotateY(120deg); } 100% { transform: rotateY(480deg); }
}
@-o-keyframes door2 { 0% { transform: rotateY(120deg); } 100% { transform: rotateY(480deg); }
}
@keyframes door2 { 0% { transform: rotateY(120deg); } 100% { transform: rotateY(480deg); }
}
@-moz-keyframes door3 { 0% { transform: rotateY(240deg); } 100% { transform: rotateY(600deg); }
}
@-webkit-keyframes door3 { 0% { transform: rotateY(240deg); } 100% { transform: rotateY(600deg); }
}
@-o-keyframes door3 { 0% { transform: rotateY(240deg); } 100% { transform: rotateY(600deg); }
}
@keyframes door3 { 0% { transform: rotateY(240deg); } 100% { transform: rotateY(600deg); }
}
Developer | Bramus |
Username | bramus |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 2,312 Kb |
Views | 58,696 |
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 |
Skrollr basic implementation | 2,467 Kb |
Pythagoras | 3,197 Kb |
Scrolling Horizontal Isotope | 2,017 Kb |
SVG SMIL Logo Animation | 3,788 Kb |
Skrollr basic implementation, alternative | 2,611 Kb |
Scroll Animations | 3,466 Kb |
Simple Flexbox Grid System | 7,705 Kb |
Bouncing Ball Animation | 5,013 Kb |
CSS Glitch | 2,699 Kb |
Canvas multiline fillText | 1,875 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 |
Speech bubbles | Something | 1,547 Kb |
Algorithm practice | Abensur | 5,620 Kb |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Dribbble Inspired Registration Form | Lancebush | 2,358 Kb |
Material Design-Layout-Principles Practice | Fraina | 2,331 Kb |
A Pen by Taylor Vowell | Taylorvowell | 5,962 Kb |
Transition | Shayhowe | 1,632 Kb |
Plotting Points with D3.js | Laurakelly | 31,996 Kb |
Portfolio Layout Flex | Lahvjal | 3,489 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!