想要顯示元素旋轉時的厚度

我正在通過CSS沿Y軸旋轉90度硬幣。有沒有辦法讓我可以在旋轉後顯示硬幣的厚度，我認爲在硬幣沿着Y軸旋轉後我可以縮放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'); 
});

網絡ddle

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

來源

2012-07-25 manyu

硬幣」？這只是2D，沒有真正的Z軸存在。 – Armin 2012-07-25 07:52:22

因爲我使用硬幣的二維圖像，但實際上硬幣是三維物體，所以當我沿着Y軸旋轉時，我應該看到厚度以及具有實際效果。這可以用css本身完成嗎？ – manyu 2012-07-25 07:54:56

啊好的。我認爲CSS不能滿足你的要求。這看起來像是一個Canvas的任務。但我沒有經驗。 – Armin 2012-07-25 07:56:28

可以使用僞元素給類似的效果。這裏有一個例子：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/

來源

2012-07-25 09:00:48 joshnh

+1非常好！;） – Christoph 2012-07-25 09:20:25

@joshnh非常感謝你的回覆真的幫助:) .....真棒很棒你怎麼做到了...... – manyu 2012-07-25 09:41:49

+1，好的:) – sandeep 2012-07-25 10:05:24

想要顯示元素旋轉時的厚度

回答

相關問題