Menu
I have created this locker opening type of effect, but without a thick door, it is not looking very good. How can I add some thickness to the door so that it looks like a locker door? Anything else i can do to make it look more realistic?
Only CSS solution please, no JavaScript.
#container {
width: 100%;
height: 600px;
position: relative;
}
#maincircle {
width: 200px;
height: 200px;
position: absolute;
top: 200px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
#door, #back {
border-radius: 50%;
background-color: grey;
top: 1px;
left: 1px;
position: absolute;
width: 99%;
height: 99%;
transition: transform 2s 0.5s;
transform-origin: 0 50%;
}
#door {
backface-visibility: hidden;
}
#locker {
position: absolute;
top: 25px;
left: 25px;
border-radius: 50%;
width: 150px;
height: 150px;
background-image: url(https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png);
background-size: 150px 150px;
transition: transform 0.5s;
}
#maincircle:hover #door #locker {
transform: rotate(90deg);
}
#maincircle:hover #door, #maincircle:hover #back {
transform: rotateY(-110deg);
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="maincircle">
<div id="back"></div>
<div id="door"><div id="locker"></div></div>
</div>
</div>
</body>
981
You could use pseudo-elements :before and :after to give the door some thickness. I made a rough example for you but please modify (change colors, add prefixes to the css etc) it to your needs.
body {
margin:0;
width: 100%;
height: 100%;
}
.maincircle {
width: 200px;
height: 200px;
position: relative;
margin-left: 200px;
margin-top: 10px;
border-radius: 50%;
border: 1px solid black;
perspective: 600px;
transform-style: preserve-3d;
}
.door {
background-color: gray;
border-radius: 100%;
height: 200px;
margin: 0;
position: relative;
width: 200px;
transition: .5s linear;
transform-style: preserve-3d;
transform-origin: 0 50%;
}
.door:before {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
border-radius: 100%;
content: '';
height: 200px;
left: 0;
position: absolute;
top: 0;
width: 200px;
transform: translateZ(-5px);
}
.door:after {
background-color: gray;
background-image: linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25));
bottom: 0;
content: '';
left: 100px;
position: absolute;
top: 0;
width: 5px;
z-index: -10;
transform: rotateY(-90deg);
transform-origin: 100% 50%;
}
.maincircle:hover .door {
transition: transform 2s 0.5s;
transform: rotateY(-110deg);
}
.maincircle:hover .locker {
transition: transform 0.5s;
transform: rotate(90deg);
}
.locker {
background-image: url("https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png");
position: absolute;
top: 25px;
left: 25px;
background-size: 100% 100%;
border-radius: 100%;
width: 150px;
height: 150px;
}<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="maincircle">
<div class="door">
<div class="locker"></div>
</div>
</div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
