Html 如何使旋转形状看起来很厚？

我创造了这种打开柜子的效果，但是如果没有厚门，它看起来就不太好。我怎样才能给门增加一些厚度，使它看起来像一个储物柜门？ 我还能做些什么让它看起来更真实吗

请只使用CSS解决方案，不使用JavaScript

#容器{
宽度：100%；
高度：600px；
位置：相对位置；
}
#主圈{
宽度：200px；
高度：200px；
位置：绝对位置；
顶部：200px；
左：50%；
转化：translateX（-50%）；
边界半径：50%；
边框：1px纯黑；
透视图：600px；
变换样式：保留-3d；
}
#门，后面{
边界半径：50%；
背景颜色：灰色；
顶部：1px；
左：1px；
位置：绝对位置；
宽度：99%；
身高：99%；
转变：转变2s0.5s；
变换原点：0.50%；
}
#门{
背面可见性：隐藏；
}
#储物柜{
位置：绝对位置；
顶部：25px；
左：25px；
边界半径：50%；
宽度：150px；
高度：150像素；
背景图片：url(https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png);
背景尺寸：150px 150px；
转变：转变0.5s；
}
#主循环：悬停#门#储物柜{
变换：旋转（90度）；
}
#主循环：悬停#门，#主循环：悬停#后{
变换：旋转（-110度）；
}

---

您可以使用伪元素

:before

和

:before

赋予门一定的厚度。我为你做了一个粗略的例子，但请修改（改变颜色，添加前缀的css等）它到您的需要

正文{
保证金：0；
宽度：100%；
身高：100%；
}
梅因Circle先生{
宽度：200px；
高度：200px；
位置：相对位置；
左边距：200px；
边缘顶部：10px；
边界半径：50%；
边框：1px纯黑；
透视图：600px；
变换样式：保留-3d；
}
.门{
背景颜色：灰色；
边界半径：100%；
高度：200px；
保证金：0；
位置：相对位置；
宽度：200px；
过渡：5s线性；
变换样式：保留-3d；
变换原点：0.50%；
}
.门：以前{
背景颜色：灰色；
背景图像：线性梯度（hsla（0,0%，100%，.25），hsla（0,0%，0%，.25））；
边界半径：100%；
内容：''；
高度：200px；
左：0；
位置：绝对位置；
排名：0；
宽度：200px；
变换：translateZ（-5px）；
}
.门：之后{
背景颜色：灰色；
背景图像：线性梯度（hsla（0,0%，100%，.25），hsla（0,0%，0%，.25））；
底部：0；
内容：''；
左：100px；
位置：绝对位置；
排名：0；
宽度：5px；
z指数：-10；
变换：旋转（-90度）；
变换原点：100%50%；
}
.main圆圈：悬停。门{
转变：转变2s0.5s；
变换：旋转（-110度）；
}
.maincircle:悬停。储物柜{
转变：转变0.5s；
变换：旋转（90度）；
}
.储物柜{
背景图像：url（“https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png"); 
位置：绝对位置；
顶部：25px；
左：25px；
背景大小：100%100%；
边界半径：100%；
宽度：150px；
高度：150像素；
}