순수한 css에서 실린더 모양 만들기 3d

Question

저는 캔버스 모양의 3D 도형 작업을하고있었습니다. 플러그인없이 순수 css3d 실린더를 만들려고합니다.

여기 제가 시도한 것은 출력이며 출력되는 코드입니다.

CSS 코드

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 코드 몇 가지 중 하나가 나를 도울 수

<div>&nbsp;</div> 

. 사전 마하

에서

덕분에

Answer 1

이 문제에 다른 aproaches의 몇 가지가있을 수 있습니다.
첫 번째 (가장 단순한 것)는 원통형 느낌을 줄 수있는 여러 개의 누적 원이 있어야합니다.
하지만 단순한 그래픽 모듈을 렌더링하기 위해 페이지에서 div 수백을 원하는 사람이 있습니까? 당신은 결국 실린더를 시뮬레이션 여러 개의 원을 시뮬레이션하는 하나의 요소에 여러 box-shadow 값을 사용할 수 있습니다

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

다음은이 예제와 바이올린의 : http://jsfiddle.net/gion_13/nDCme/.

Answer 2

다음과 같은 몇 가지 고급 예가있다 :
http://x.dtott.com/3d/
http://cssdeck.com/labs/pure-css-3d-primitives

및 유용한 CSS 모양을 다음과 같이 :
http://css-tricks.com/examples/ShapesOfCSS/

개인적으로 나는이 간단한 HTML을 구축

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

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

당신은 DEMO