想要在旋转时显示元素的厚度

我正在通过CSS将硬币沿Y轴旋转90度。 有没有办法让我可以在旋转之后显示硬币的厚度，我想我可以在硬币沿Y轴旋转后缩放，但这似乎不起作用。 如果可能，请建议一些方法来做同样的事情。 link_on_js也是如此。 请使用webkit浏览器打开链接。

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

jQuery的

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

小提琴

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

Answer 1

您可以使用伪元素来提供类似的效果。 这是一个例子： http ： //jsfiddle.net/joshnh/y7rQL/

 body { transform: perspective(500px); transform-style: preserve-3d; } .coin { background-image: url("http://sofzh.miximages.com/jquery/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); }​ 

此外，这是一个旋转180度的版本（虽然它不是很好）： http ： //jsfiddle.net/joshnh/Bz22S/