crear forma de cilindro en puro css 3d

Solución:

hay algunos ejemplos avanzados como estos:
http://x.dtott.com/3d/
http://cssdeck.com/labs/pure-css-3d-primitives

y algunas formas CSS útiles como estas:
http://css-tricks.com/examples/ShapesOfCSS/

personalmente construí este sencillo HTML

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

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

y puedes ver una DEMO

Puede haber un par de enfoques diferentes sobre su problema.
El primero (y el más simple) sería tener varios círculos apilados que le darían la impresión de un cilindro.
Pero quien quiere cientos de divs en una página solo para representar un módulo gráfico simple? Puede utilizar varios box-shadow valores en un solo elemento para simular múltiples círculos que eventualmente simula el cilindro:

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

Aquí hay un violín con este ejemplo: http://jsfiddle.net/gion_13/nDCme/.

---

---

Utiliza Nuestro Buscador