<div></div>
*{
box-sizing: border-box;
}
body{
display: flex;
height: 100vh;
flex-direction: column;
align-items: center;
justify-content: center;
background: #ced9cf;
}
div{
position: absolute;
width: 30px;
height: 30px;
background: rgb(88, 86, 86) ;
perspective: 800px;
box-shadow:
0px 0px 0px 123px rgb(46, 45, 45),
0px 0px 0px 125px rgb(5, 5, 5),
0px 0px 0px 130px rgb(80, 76, 76),
-12px 0px 0px 130px rgb(233, 219, 219),
-15px -2px 0px 130px rgba(80, 76, 76, 0.856),
3px -2px 0px 130px rgba(80, 76, 76, 0.459),
3px 2px 0px 130px rgba(80, 76, 76, 0.459),
-15px 2px 0px 130px rgba(80, 76, 76, 0.897),
0px 0px 0px 134px #d7d9d7,
-12px 0px 0px 134px #d7d9d7,
3px 0px 72px 135px rgb(102, 98, 98);
}
div::before{
content:"\00a0 SINGLE DIV MUSIC CD \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0
\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\ ____Hover over me____" ;
font-family: Arial, Helvetica, sans-serif;
line-height: 95px;
font-size: 25px;
position: absolute;
width: 283px;
height: 290px;
top: -130px;
left: -125px;
color:rgb(243, 168, 168);
perspective: inherit;
background: radial-gradient(rgb(161, 5, 5), #d15503);
transform: rotateY(0deg);
transform-origin: center left;
z-index: 0;
text-shadow:1px 1px 5px rgb(161, 5, 5), 0 0 5em rgb(238, 228, 183), 0 0 0.2em rgb(6, 133, 65);
box-shadow: inset 0px 0px 3px 2px black;
}
div::after{
content: "";
line-height: 6px;
font-size: 40px;
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
color: honeydew;
top: -110px;
left:-110px;
background: radial-gradient(black 2%,rgb(241, 240, 240) 5%,rgb(241, 240, 240) 8%, rgb(8, 8, 8) 8%, rgb(8,8,8) 10%,rgb(56, 51, 51) 12%,
rgb(56, 51, 51) 20%, rgb(27, 14, 14) 21%, rgb(161, 5, 5) 22% );
z-index: -1;
box-shadow:2px 1px 0px 1px rgb(97, 95, 95),
0px 0px 0px 5px black,
0px 0px 0px 7px rgb(77, 73, 73),
inset 5px 0px 6px rgb(204, 81, 81),
inset 85px 0px 15px rgb(161, 5, 5),
inset -15px 0px 1px rgb(161, 5, 5),
inset -15px 7px 10px rgb(230, 51, 51);
}
div:hover:before {
transform: rotateY(-75deg);
transform-origin: center left;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.