1
私はこのロッカーオープニングタイプのエフェクトを作成しましたが、厚いドアがなくてもとても見栄えが良くありません。ドアに厚さを加えて、ロッカーのドアのように見えるようにするにはどうすればいいですか? もっと現実的に見えるようにするために何かできることはありますか?回転形状を太く見せるには?
CSSソリューションのみ、JavaScriptは必要ありません。
#container {
width: 100%;
\t height: 600px;
\t position: relative;
}
#maincircle {
\t width: 200px;
\t height: 200px;
\t position: absolute;
\t top: 200px;
\t left: 50%;
\t transform: translateX(-50%);
\t border-radius: 50%;
\t border: 1px solid black;
\t perspective: 600px;
\t transform-style: preserve-3d;
}
#door, #back {
\t border-radius: 50%;
\t background-color: grey;
\t top: 1px;
\t left: 1px;
\t position: absolute;
\t width: 99%;
\t height: 99%;
\t transition: transform 2s 0.5s;
\t transform-origin: 0 50%;
}
#door {
\t backface-visibility: hidden;
}
#locker {
\t position: absolute;
\t top: 25px;
\t left: 25px;
\t border-radius: 50%;
\t width: 150px;
\t height: 150px;
\t background-image: url(https://irp-cdn.multiscreensite.com/806e9122/dms3rep/multi/tablet/CombinationLock-1000x1000.png);
\t background-size: 150px 150px;
\t transition: transform 0.5s;
}
#maincircle:hover #door #locker {
transform: rotate(90deg); \t
}
#maincircle:hover #door, #maincircle:hover #back {
\t transform: rotateY(-110deg);
}
<html>
<head>
\t <link rel="stylesheet" href="style.css">
\t </head>
\t <body>
\t <div id="container">
\t \t <div id="maincircle">
\t \t \t <div id="back"></div>
\t \t \t <div id="door"><div id="locker"></div></div>
\t \t \t </div>
\t \t </div>
\t </body>