WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Drawer Effect
1309
ledoc
Open In Editor
Publish Your Code
Recommended
28 August 2024
Images Navigation Hover Effect
25 September 2023
Bubble Button Effect
7 November 2024
Text Hover Animation Effect
HTML
Copy
Drawer Effect
Drawer Effect
My Colors
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; width: 100vw; font-family: "Monaco"; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; } h1 { margin-bottom: 50px; } .drawer_wrapper { height: 100px; width: 500px; position: relative; border-radius: 10px; } .layer { position: absolute; inset: 0; transition: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 10px; transform-origin: bottom; } .info { position: absolute; padding: 10px; color: white; font-weight: lighter; inset: 0; height: 100%; width: 100%; font-size: 0.5rem; } .drawer_wrapper:hover .layer_5 { transform: perspective(70rem) rotateX(-45deg); transition-delay: 0ms; box-shadow: 0px -5px 8px 0px #00000026; } .drawer_wrapper:hover .layer_4 { transform: perspective(70rem) rotateX(-35deg); transition-delay: 70ms; box-shadow: 0px -2px 4px 0px #b9310053; } .drawer_wrapper:hover .layer_3 { transform: perspective(70rem) rotateX(-25deg); transition-delay: 100ms; } .drawer_wrapper:hover .layer_2 { transform: perspective(70rem) rotateX(-15deg); transition-delay: 150ms; } .drawer_wrapper:hover .layer_1 { transform: perspective(70rem) rotateX(-5deg); transition-delay: 200ms; } .drawer_wrapper:hover .handle { background-color: #c33a08; } .layer_1 { background-color: salmon; z-index: 1; } .layer_2 { background-color: skyblue; z-index: 2; } .layer_3 { background-color: orange; z-index: 3; } .layer_4 { background-color: orangered; z-index: 4; } .layer_5 { background-color: black; z-index: 5; cursor: pointer; } .handle { position: absolute; height: 7px; width: 50px; border: 2px solid white; border-radius: 10px; left: 50%; bottom: 40%; transform: translate(-50%, -50%); background-color: orangered; transition: 200ms ease; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */