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

Question

我正在研究 Canvas 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

有一些像这样的高级示例:
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