desea mostrar el grosor de un elemento mientras gira

Estoy rotando una moneda a lo largo del eje Y 90 grados a través de CSS. ¿Hay alguna manera para que pueda mostrar el grosor de la moneda después de que haya girado, pensé que puedo escalarY después de que la moneda haya girado a lo largo del eje Y, pero parece que esto no funciona. Sugiera una forma de hacer lo mismo si es posible. link_on_js fiddle para lo mismo. Utilice los navegadores webkit para abrir el enlace.desea mostrar el grosor de un elemento mientras gira

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/

Fuente

2012-07-25 manyu

¿Qué quiere decir con "espesor de la acuñar"? Es solo 2D, no existe un eje z real. – Armin

ya que estoy usando una imagen bidimensional para la moneda, pero en realidad una moneda es un objeto tridimensional, así que cuando debería girarla a lo largo del eje Y debería ver el grosor para tener un efecto realista. ¿Se puede hacer esto con CSS? – manyu

Ah bien. Creo que CSS no se ajusta a tus requisitos. Esto parece una tarea para Canvas. Pero no tengo experiencia con eso. – Armin

Puede utilizar pseudo-elementos para dar un efecto que es similar. Aquí está un ejemplo: 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); 
}

Además, aquí es una versión que hace girar 180 grados (que no es tan agradable aunque): http://jsfiddle.net/joshnh/Bz22S/

Fuente

2012-07-25 09:00:48 joshnh

+1 Muy bien !;) – Christoph

@joshnh muchas gracias su respuesta realmente ayudó :) ..... realmente increíble cómo lo hizo .... – manyu

+1, bueno :) :) – sandeep

desea mostrar el grosor de un elemento mientras gira

Respuesta

Cuestiones relacionadas