.shoe-cabinet {
position: relative;
width: 300px;
height: 600px;
margin: 0 auto;
perspective: 1000px;
}
.shelf {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.shelf:hover {
transform: rotateY(360deg);
}
.left-shelf {
transform: rotateY(0deg) translateZ(150px);
}
.right-shelf {
transform: rotateY(180deg) translateZ(150px);
}
.shelf-face {
position: absolute;
width: 280px;
height: 500px;
background: #fff;
padding: 20px;
box-shadow: 0 0 20px rgba(0,0,0,.5);
backface-visibility: hidden;
transform-origin: center center;
}
.left-shelf .shelf-face {
transform: rotateY(0deg);
}
.right-shelf .shelf-face {
transform: rotateY(180deg);
}首先，大家需要一个
元素作为鞋柜的容器，为了实现3D效果，大家需要将它的perspective属性设置为1000px。接着，大家在容器中添加两个
元素，分别代表鞋柜的两侧。
大家需要分别设置左右两侧的旋转角度，因此需要分别设置它们的.transform属性。.left-shelf的初始角度为0deg，.right-shelf的初始角度为180deg。
大家在每个.shelf中再添加一个
元素，它代表鞋柜每一层的面板。这个元素设置了背景色、阴影、旋转等属性，为鞋柜增添清新亮丽的表面。
最后，大家为.shelf元素添加:hover伪类，当鼠标悬停在鞋柜上时，会触发transform:rotateY(360deg)属性，从而实现鞋柜的旋转效果。
这就是CSS3旋转鞋柜的设计过程，希望对您有所启发，让您的家居设计更加富有创意和独特性。