CSSを使ってY軸に沿ってコインを90度回転させています。コインが回転した後にコインの厚さを表示できるようにする方法はありますか?コインがY軸に沿って回転した後にスケールできると思っていましたが、これはうまくいかないようです。可能であれば、同じことをするための何らかの方法を提案してください。同じもののためにlink_on_js fiddle。リンクを開くには、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
<div class="coin"></div>
jqueryの
$('.coin').click(function() {
$(this).toggleClass('flip');
});
Fiの
あなたがの厚さ」とはどういう意味ですかコイン"?それはただの2Dであり、実際のz軸は存在しません。 – Armin
私はコインの2D画像を使用していますが、実際にはコインは3Dオブジェクトですので、Y軸に沿って回転させる必要がありますので、実際の効果があるはずです。これはCSS自体で行うことができますか? – manyu
ああ。 CSSはあなたの要求に合っていないと思います。これはCanvasの仕事のようです。しかし、私はそれについての経験はありません。 – Armin