CODEWITHSUNDEEP
css
Bill Dami
Bill Dami

Reputation: 3235

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

Upvotes: 2

Views: 4501

Answers (1)

bjb568
bjb568

Reputation: 11498

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) }

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

Oh, and -vendor-prefixes.

Upvotes: 6

Related Questions