文字使用CSS

是否有可能，使用某種類型的CSS3黑魔法，模仿圍繞3D柱體包裝文字的iOS7日期選擇效果（參見下圖）圍繞3D柱體效果包裹，給定一個靜態無序列表已知身高？文字使用CSS

ios7 datepicker

2014-05-20 Bill Dami

[3D變換]（https://developer.mozilla.org/en-US/docs/Web/CSS/transform） – bjb568

@ bjb568是的，我認爲變換將是我最好的選擇，但是即使查看該文檔和實驗我已經無法拿出的組合偏斜/秤/旋轉ECT，可以準確地複製這種效果。你能否提供一個使用變換實現這個特定的例子？ –

var e = document.getElementsByTagName('div'); 
for (var i = 0; i < e.length; i++) { 
    e[i].style.webkitTransform = 'rotateX('+(i-e.length/2)*20+'deg) translateZ(40px)'; 
}

旋轉和平移。保留全部absolute。 http://jsfiddle.net/CAbkL/

如果他們是靜態的，你事先知道有多少，你可以使用純CSS：

#d1 { -webkit-transform: rotateX(-75deg) translateZ(40px) } 
#d2 { -webkit-transform: rotateX(-60deg) translateZ(40px) } 
#d3 { -webkit-transform: rotateX(-45deg) translateZ(40px) } 
#d4 { -webkit-transform: rotateX(-30deg) translateZ(40px) } 
#d5 { -webkit-transform: rotateX(-15deg) translateZ(40px) } 
#d7 { -webkit-transform: rotateX(15deg) translateZ(40px) } 
#d8 { -webkit-transform: rotateX(30deg) translateZ(40px) } 
#d9 { -webkit-transform: rotateX(45deg) translateZ(40px) } 
#d10 { -webkit-transform: rotateX(60deg) translateZ(40px) } 
#d11 { -webkit-transform: rotateX(75deg) translateZ(40px) }

http://jsfiddle.net/CAbkL/1/

哦，-vendor-prefixes。

來源

2014-05-20 20:41:03 bjb568

完美，謝謝！在在這種情況下，任何人絆倒，這裏是@ bjb568的解決方案的prettied後續版本，風格像iOS7選擇器：http://codepen.io/billdami/pen/bCIxs –

另外，我是能夠省略絕對定位和'translateZ（）'的和只是增加了一些負邊距第一和最後一個元素採取扭曲間距的護理。不知道這樣做是否有什麼不利因素。 –

@Bill嗯，你手動空間任何與利潤率...無論如何，你應該在這種情況下使用'em'，使其與字體大小調整瀏覽器。 – bjb568

回答

相關問題