使用CSS围绕3D圆柱体效果的文本

Question

使用某种类型的CSS3黑魔法是否有可能模仿围绕3D圆柱体包裹文本的iOS7瞄准器效果（见下面的截图），给定一个已知高度的静态无序列表？

Answer 1

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。