2012-07-25 13 views
10

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の

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

+1

あなたがの厚さ」とはどういう意味ですかコイン"?それはただの2Dであり、実際のz軸は存在しません。 – Armin

+0

私はコインの2D画像を使用していますが、実際にはコインは3Dオブジェクトですので、Y軸に沿って回転させる必要がありますので、実際の効果があるはずです。これはCSS自体で行うことができますか? – manyu

+0

ああ。 CSSはあなたの要求に合っていないと思います。これはCanvasの仕事のようです。しかし、私はそれについての経験はありません。 – Armin

答えて

26

ddleあなたは同様の効果を与えることを擬似要素を使用することができます。次に例を示します。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); 
}​ 

はまた、ここでは180度回転したバージョンは、(それはしかしそれほど素敵ではありません)です:http://jsfiddle.net/joshnh/Bz22S/

+1

+1非常に良い!;) – Christoph

+1

@ joshnhあなたの返信は本当に助けてくれてありがとう..... .....本当に素晴らしい方法は、それをした.... – manyu

+0

+1、良いもの:) – sandeep

関連する問題