Folding

Developer
Ee Venn Soh
Size
2,184 Kb
Views
32,384
  1. Folding Previews
  2. Folding HTML Codes
  3. Folding CSS Codes

How do I make an folding?

What is a folding? How do you make a folding? This script and codes were developed by Ee Venn Soh on 07 September 2022, Wednesday.

Folding Previews
IQ Test

Folding - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Folding</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ .view {	width: 340px;	height: 200px;	background: black;	perspective: 800px;
}
.slice {	width: 60px;	height: 100%;	transform-style: preserve-3d;	transform-origin: left center;	transition: transform 150ms ease-in-out;
}
.s2, .s3, .s4, .s5 {	transform: translate3d(60px, 0, 0);
}
.overlay {	width: 60px;	height: 100%;	opacity: 0;	position: absolute;	transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {	opacity: 1;
}
.view:hover .s1 {	transition-delay: 200ms;	transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{	transition-delay: 150ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{	transition-delay: 100ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4 {	transition-delay: 50ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5 {	transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="view">	<div class="slice s1" style="background-color: #111;"><span class="overlay"></span>	<div class="slice s2" style="background-color: #222"><span class="overlay"></span>	<div class="slice s3" style="background-color: #333;"><span class="overlay"></span>	<div class="slice s4" style="background-color: #444;"><span class="overlay"></span>	<div class="slice s5" style="background-color: #555;"><span class="overlay"></span>	</div>	</div>	</div>	</div>	</div>	</div>
</body>
</html>

Folding - Script Codes CSS Codes

.view {	width: 340px;	height: 200px;	background: black;	perspective: 800px;
}
.slice {	width: 60px;	height: 100%;	transform-style: preserve-3d;	transform-origin: left center;	transition: transform 150ms ease-in-out;
}
.s2, .s3, .s4, .s5 {	transform: translate3d(60px, 0, 0);
}
.overlay {	width: 60px;	height: 100%;	opacity: 0;	position: absolute;	transition: opacity 150ms ease-in-out;
}
.view:hover .overlay {	opacity: 1;
}
.view:hover .s1 {	transition-delay: 200ms;	transform: rotate3d(0,1,0,-3deg);
}
.view:hover .s2{	transition-delay: 150ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-10deg);
}
.view:hover .s3{	transition-delay: 100ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-16deg);
}
.view:hover .s4 {	transition-delay: 50ms;	transform: translate3d(59px,0,0) rotate3d(0,1,0,-30deg);
}
.view:hover .s5 {	transform: translate3d(60px,0,0) rotate3d(0,1,0,-42deg);
}
Folding - Script Codes
Folding - Script Codes
Home Page Home
Developer Ee Venn Soh
Username vennsoh
Uploaded September 07, 2022
Rating 3
Size 2,184 Kb
Views 32,384
Do you need developer help for Folding?

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!

Ee Venn Soh (vennsoh) Script Codes
Name
CSS Pattern
Smiley Egg
A Pen by Ee Venn Soh
Blackout
UI
Crazy Ball
Meteor Rain
Polygon Dodecahedron in CSS
Create amazing web 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!