chcesz pokazać grubość elementu podczas obracania

Question

Obracam monetę wzdłuż osi Y o 90 ° do CSS. Czy istnieje sposób, aby pokazać grubość monety po jej obróceniu, myślałem, że mogę się skalować po obróceniu monety wzdłuż osi Y, ale to nie działa. Proszę sugerować sposób, aby zrobić to samo, jeśli to możliwe. link_on_js fiddle za to samo. Użyj przeglądarki Webkit, aby otworzyć link.

CSS

.coin { 
    display: block; 
    background: url("url-to-image-of-coin.jpg"); 
    background-size: 100% 100%; 
    width: 100px; 
    height: 100px; 
    margin: auto; 
    border-radius: 100%; 
    transition: all 500ms linear; 
} 

.flip { 
    transform: rotateY(180deg); 
} 

HTML

<div class="coin"></div> 

jQuery

$('.coin').click(function() { 
    $(this).toggleClass('flip'); 
}); 

Fi DDLE

http://jsfiddle.net/7EtLu/22/

Answer 1

można użyć pseudo-elementy, aby dać efekt podobny. Oto przykład: http://jsfiddle.net/joshnh/y7rQL/

<div class="coin"></div>

body { 
    transform: perspective(500px); 
    transform-style: preserve-3d; 
} 
.coin { 
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png"); 
    background-size: 100% 100%; 
    border-radius: 100%; 
    height: 100px; 
    margin: 50px auto; 
    position: relative; 
    transition: .5s linear; 
    transform-style: preserve-3d; 
    width: 100px; 
} 
.coin:after { 
    background-color: #262626; 
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25)); 
    bottom: 0; 
    content: ''; 
    left: 45px; 
    position: absolute; 
    top: 0; 
    transform: rotateY(-90deg); 
    transform-origin: 100% 50%; 
    width: 5px; 
    z-index: -10; 
} 
.coin:before { 
    background-color: #262626; 
    background-image: -webkit-linear-gradient(hsla(0,0%,100%,.25), hsla(0,0%,0%,.25)); 
    border-radius: 100%; 
    content: ''; 
    height: 100px; 
    left: 0; 
    position: absolute; 
    top: 0; 
    transform: translateZ(-5px); 
    width: 100px; 
} 
.coin:hover { 
    transform: rotateY(90deg); 
}​ 

Również tutaj jest wersja, która obraca się o 180 stopni (to nie jest tak ładnie, choć): http://jsfiddle.net/joshnh/Bz22S/