Create Cylinder Shape In Pure Css 3d

Answer :

there are some advanced examples like these:

http://x.dtott.com/3d/

http://cssdeck.com/labs/pure-css-3d-primitives

and some useful CSS shapes like these:

http://css-tricks.com/examples/ShapesOfCSS/

personally I built this simple one HTML

<div class="tank">
    <div class="bottom"></div>
    <div class="middle"></div>
    <div class="top"></div>  
</div>

and CSS

.tank{
    position:relative;
     margin:50px;
}

.tank .middle{
    width:120px;
    height:180px;
    background-color:#444;
    position:absolute;
}

.tank .top{
    width: 120px;
    height: 50px;
    background-color:#666;
    -moz-border-radius: 60px / 25px;
    -webkit-border-radius: 60px / 25px;
    border-radius: 60px / 25px;
    position:absolute;
    top:-25px;
}

.tank .bottom{
    width: 120px;
    height: 50px;
    background-color:#444;
    -moz-border-radius: 60px / 25px;
    -webkit-border-radius: 60px / 25px;
    border-radius: 60px / 25px;
    position:absolute;
    top:155px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.75)
}

and you can see a DEMO

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/.