Как сделать вращающуюся форму толстой?

Я создал этот режим открытия шкафчика, но без толстой двери он выглядит не очень хорошо. Как я могу добавить толщину к двери, чтобы она выглядела как дверь в шкафчик? Что-нибудь еще, что я могу сделать, чтобы сделать его более реалистичным?Как сделать вращающуюся форму толстой?

Только 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>

источник

2016-05-28 Dhruv Chadha

Вы можете использовать псевдо-элементы :before и :after дать дверь некоторую толщину. Я сделал для вас грубый пример, но, пожалуйста, измените (измените цвета, добавьте префиксы в css и т. Д.), Чтобы это соответствовало вашим потребностям.

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>

источник

2016-05-28 19:29:23 thepio

Как сделать вращающуюся форму толстой?

ответ

Смежные вопросы