使用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.