CSS Paperfold Effect
How do I make an css paperfold effect?
What is a css paperfold effect? How do you make a css paperfold effect? This script and codes were developed by Daniel Gooß on 10 November 2022, Thursday.
CSS Paperfold Effect - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Paperfold Effect</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! */ * { box-sizing: border-box;
}
h1,
h2,
p { margin-top: 0; margin-bottom: 1em; padding: 0 50px;
}
body { max-width: 960px; background-color: #000;
}
.button { display: inline-block; padding: 10px 20px; margin-bottom: 20px; background-color: green; color: #fff; cursor: pointer;
}
.folds { perspective: 2000px; perspective-origin: 50% 0%;
}
.folds .fold { height: 400px; background-color: #666; transform-style: preserve-3d; transform-origin: center top; transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.folds .fold .fold { background-color: #ddd;
}
.folds .fold .content { height: 400px;
}
.folds > .fold { transform: rotate3d(1, 0, 0, -90deg);
}
.folds > .fold .fold { transform: rotate3d(1, 0, 0, 179.9deg);
}
.moveable { background-color: #fff; padding: 50px 0; border-top: 3px solid #ccc; transform: translate3d(0, -400px, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.525, 0.915);
}
#toggle:checked ~ .button { background-color: red;
}
#toggle:checked ~ .container .folds .fold { background-color: #fff; transform: none;
}
#toggle:checked ~ .container .moveable { transform: translate3d(0, 400px, 0); transition-timing-function: cubic-bezier(0.4, 0.042, 0.32, 0.925);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <input type="checkbox" id="toggle" hidden="hidden"/><label class="button" for="toggle">Toggle</label>
<div class="container"> <div class="folds"> <div class="fold"> <div class="content"> <img src="http://cdn.unleashthefanboy.com/wp-content/uploads/2012/05/ironman_banner.jpg" /> <h1>Iron Man</h1> </div> <div class="fold"> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus sit minus cumque quis similique alias vel neque necessitatibus quas possimus maxime tenetur. Reiciendis tempora consectetur sit eos ipsam omnis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta rem ratione mollitia rerum recusandae illum aliquam architecto porro nulla voluptate numquam nisi placeat officia magni consequuntur accusamus debitis dolores qui.</p> </div> </div> </div> </div> <div class="moveable"> <h2>Hello Berlin!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus sit minus cumque quis similique alias vel neque necessitatibus quas possimus maxime tenetur. Reiciendis tempora consectetur sit eos ipsam omnis iste! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta rem ratione mollitia rerum recusandae illum aliquam architecto porro nulla voluptate numquam nisi placeat officia magni consequuntur accusamus debitis dolores qui.</p> </div>
</div>
</body>
</html>
CSS Paperfold Effect - Script Codes CSS Codes
* { box-sizing: border-box;
}
h1,
h2,
p { margin-top: 0; margin-bottom: 1em; padding: 0 50px;
}
body { max-width: 960px; background-color: #000;
}
.button { display: inline-block; padding: 10px 20px; margin-bottom: 20px; background-color: green; color: #fff; cursor: pointer;
}
.folds { perspective: 2000px; perspective-origin: 50% 0%;
}
.folds .fold { height: 400px; background-color: #666; transform-style: preserve-3d; transform-origin: center top; transition: transform 0.5s ease-in-out, background-color 0.5s ease-in-out;
}
.folds .fold .fold { background-color: #ddd;
}
.folds .fold .content { height: 400px;
}
.folds > .fold { transform: rotate3d(1, 0, 0, -90deg);
}
.folds > .fold .fold { transform: rotate3d(1, 0, 0, 179.9deg);
}
.moveable { background-color: #fff; padding: 50px 0; border-top: 3px solid #ccc; transform: translate3d(0, -400px, 0); transition: transform 0.5s cubic-bezier(0.7, 0, 0.525, 0.915);
}
#toggle:checked ~ .button { background-color: red;
}
#toggle:checked ~ .container .folds .fold { background-color: #fff; transform: none;
}
#toggle:checked ~ .container .moveable { transform: translate3d(0, 400px, 0); transition-timing-function: cubic-bezier(0.4, 0.042, 0.32, 0.925);
}
Developer | Daniel Gooß |
Username | daniel_gooss |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 3,473 Kb |
Views | 32,384 |
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 |
Web Component Switches | 4,335 Kb |
Revolver Slideshow | 5,445 Kb |
Navigation concept | 14,510 Kb |
Base-Style | 2,614 Kb |
IPhone Ui | 8,602 Kb |
CSS Tab-Nav | 3,698 Kb |
Mobile Navigation Pattern | 5,939 Kb |
Blog Concept | 7,663 Kb |
IPhone Ui - Content only | 6,499 Kb |
Text Transition Effect | 232,607 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 |
Bootstrap Carousel Fade Transition | Rowno | 2,484 Kb |
Velocity.js custom stagger | Tommiehansen | 4,805 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
React Markdown Previewer | C0d0er | 3,190 Kb |
Mandelbrot Fractal | _Billy_Brown | 2,706 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Flex layout example | Mofny | 1,663 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Sexy Social Buttons | Ipiyale | 2,226 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!