这篇博客介绍了一种纯CSS实现的抽屉动画，通过CSS3的transform和transition属性，创建了一个3D立体的抽屉效果，包括前端开发者可以利用的详细CSS代码示例，展示了如何创建前、后、上、下、左、右六个面的抽屉以及开关动画。
css
* {
box-sizing: border-box;
}
body {
align-items: center;
background-color: #f9bf3b;
display: flex;
justify-content: center;
min-height: 100vh;
}
:root {
--height: 300;
--width: 200;
--depth: 150;
--drawerSize: calc((var(--height) / 3) - 10);
--drawerHole: calc((var(--height) - ((10 * 4) + (10 + 30))) / 3);
}
.chest {
height: calc(var(--height) * 1px);
-webkit-transform: rotateX(-30deg) rotateY(40deg);
transform: rotateX(-30deg) rotateY(40deg);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: calc(var(--width) * 1px);
}
.chest__panel {
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
}
.chest__panel:after {
content: '';
display: block;
height: 100%;
width: 100%;
}
.chest__panel--front {
-webkit-transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px));
transform: translate3d(0, 0, calc(var(--depth) / 2 * 1px));
}
.chest__panel--front:after {
background: #5b5b5b;
content: '';
height: 4px;
position: absolute;
top: -2px;
width: 100%;
}
.chest__panel--front-frame {
border: 10px solid #5b5b5b;
border-bottom-width: 30px;
border-top-width: 10px;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.chest__panel--front-frame:before {
background: #5b5b5b;
content: '';
height: 20px;
left: 0;
position: absolute;
top: calc(var(--drawerHole) *
最低0.47元/天 解锁文章
984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
