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 |
Bouncing Ball Animation | 5,013 Kb |
Pythagoras | 3,197 Kb |
Simple Flexbox Grid System | 7,705 Kb |
CSS block formatting context | 2,057 Kb |
Simplest CSS Slideshow | 1,994 Kb |
SVG SMIL Logo Animation | 3,788 Kb |
Scrolling Horizontal Isotope | 2,017 Kb |
CSS Glitch | 2,699 Kb |
Photosphere Demo | 1,922 Kb |
Skrollr basic implementation, alternative | 2,611 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 |
Word Wrap Algorithm for Multiline Canvas Text | Peterhry | 2,349 Kb |
Stylize Stories | Jvhti | 2,465 Kb |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Console fun | Dviate | 1,500 Kb |
Simple Buttons | Haydenmills | 1,750 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!