I have a list in a side bar.

When I hover over a link in the list, I would like it to appear as if it is written on the curved surface of a cylinder

2 answers


In HTML it's not possible. You can't (as of yet) bend text at all. You'll have to create the necessary grapchics in some graphic program.

You could however try to fool the eye by altering the text color or adding/removing text-shadow with CSS. But bending and distortion is not possible.

I guess you could build your own advanced SVG/JavaScript font generator and math distortion effects. But, no offense, if you knew how to that you wouldn't be asking this question :)

Answered almost 10 years ago by Jens Hedqvist
Guffa 316

That's not possible as you can't stretch text in HTML.

If you have images, you can use the same technique as used for rendering round objects in 3D modeling. Instead of having an actual cylinder, you have a pipe made of a lot of flat surfaces.

You can show part of a stretched image by putting it inside a div absolutely positioned inside another div with overflow:hidden:

.cylinder { width: 600px; }
.cylinder > div { position: relative; overflow: hidden; }
.cylinder .p1 { height: 25px; }
.cylinder .p2 { height: 50px;   }
.cylinder .p3 { height: 100px; }
.cylinder .p4 { height: 50px; }
.cylinder .p5 { height: 25px; }
.cylinder div div { position: absolute; left: 0; }
.cylinder .p1 div { height: 142px; top: 0; }
.cylinder .p2 div { height: 250px; top: -44px; }
.cylinder .p3 div { height: 400px; top: -150px; }
.cylinder .p4 div { height: 250px; top: -156px; }
.cylinder .p5 div { height: 142px; top: -117px; }
.cylinder div div img { width: 600px; height: 100%; }

<div class="cylinder">
    <div class="p1"><div><img src="http://www.guffa.com/photos/medium/992-03905.jpg"></div></div>
    <div class="p2"><div><img src="test.jpg"></div></div>
    <div class="p3"><div><img src="test.jpg"></div></div>
    <div class="p4"><div><img src="test.jpg"></div></div>
    <div class="p5"><div><img src="test.jpg"></div></div>
Answered almost 10 years ago by Guffa