Text wrapped around a 3D cylinder effect using CSS


Is it possible, using some type of CSS3 black magic, to mimic the the iOS7 datepicker effect of wrapping text around a 3D cylinder (see screenshot below), given a static unordered list with a known height?

ios7 datepicker

Problem courtesy of: Bill Dami


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)';

Rotate and translate. Keep them all absolute. http://jsfiddle.net/CAbkL/

If they're static and you know beforehand how many there are, you can use plain 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) }


Oh, and -vendor-prefixes.

Solution courtesy of: bjb568


There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.