在纯css 3d中创建圆柱形状

Question

我正在使用画布3d形状我对此非常新.我正在尝试创建没有任何插件的Pure 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>

有人能帮我吗.

在此先感谢Maha

Answer 1

有一些类似的高级示例:
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

Answer 2

您的问题可能有几种不同的方法。
第一个（也是最简单的）是有多个堆叠的圆圈，这会给你圆柱体的印象。
但谁愿意在一个页面中使用数百个divs 来渲染一个简单的图形模块呢？您可以在单个元素上使用多个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/。