在纯 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>

有人能帮我吗。

原文由 user3820621 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您的问题可能有几种不同的方法。

第一个（也是最简单的）一个是有多个堆叠的圆圈，这会给你一个圆柱体的印象。

但是谁想要一个页面中的数百个 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/ 。

原文由 gion_13 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

有一些像这样的高级示例：

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

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

以及一些有用的 CSS 形状，例如：

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

我个人构建了这个简单的 HTML

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

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

你可以看到一个 DEMO

原文由 Marco Allori 发布，翻译遵循 CC BY-SA 4.0 许可协议