body {
background-color: #fefefe;
display:flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
width:400px;
height: 400px;
/* background-color: #ccc; */
perspective: 1000px; /* 观察者距离 */
}
.layer{
width:100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
}
.layer-c{
width:300px;
height: 300px;
position: absolute;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
cursor: pointer;
box-shadow:
10px 10px 15px rgba(0,0,0,0.2), /* 主阴影(模拟侧面) */
inset 0 0 20px rgba(255,255,255,0.5); /* 内阴影(模拟反光) */
/* background: linear-gradient(
135deg,
#3a86ff 0%,
#4facfe 50%,
#83c5be 100%
); */
}
.layer1{
background-color: rgb(125,236,255,0.4);
transform: rotateX(35deg) rotateY(10deg) translateZ(160px) ;
&:hover{
background-color: rgb(125,236,255,0.8);
}
}
.layer2{
background-color: rgb(125,236,12,0.4);
transform: rotateX(35deg) rotateY(10deg) translateZ(80px);
&:hover{
background-color: rgb(125,236,12,0.8);
}
}
.layer3{
background-color: rgb(105,26,12,0.4);
transform: rotateX(35deg) rotateY(10deg) translateZ(10px);
&:hover{
background-color: rgb(105,26,12,0.8);
}
}