create cylinder shape in pure css 3d

Question

I was working on canvas 3D shapes I am very new to this. I am trying to create Pure css3d cylinder without any plugin.

Here is what I am trying and with the output code, I am getting a circle.

CSS Code:

div {
    height:200px;
    width:200px;
    border:solid 5px black;
    background:#159;
    border-radius:100%;
    display:inline-block;
    margin:1em;
    position:relative;
    text-align:center;
    line-height:200px;
    color:white;
    font-size:2em;
    transform:rotate(45deg);
    box-shadow:0 0 5px black, inset 0 0 5px #48a;
}

HTML code

<div>&nbsp;</div>

Can some one help me.

Answer 1

There might be a couple of different aproaches on your problem.
The first (and simplest) one would be to have multiple stacked circles that would give you the impression of a cylinder.
But who wants hundreds of divs in a page just to render a simple graphic module? You can use multiple box-shadow values on a single element to simulate multiple circles that eventually simulates the cylinder:

div {
    box-shadow: black 0px 0px 1px,
        black 1px 1px 1px,
        black 2px 2px 1px,
        ...
        black 99px 99px 1px,
        black 100px 100px 1px;
}

Here's a fiddle with this example: http://jsfiddle.net/gion_13/nDCme/.