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

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

提供 ACTUAL 3D 示例的答案：

最终结果如下：

JSfiddle 演示：https://jsfiddle.net/allenski/xyfhag8d/（添加了有趣的动画）。

HTML 标记：

<div id="container">
  <div id="frame">
    <div class="strips">
      <div class="strip-1"></div>
      <div class="strip-2"></div>
      <div class="strip-3"></div>
      <div class="strip-4"></div>
      <div class="strip-5"></div>
      <div class="strip-6"></div>
      <div class="strip-7"></div>
      <div class="strip-8"></div>
      <div class="strip-9"></div>
      <div class="strip-10"></div>
      <div class="strip-11"></div>
      <div class="strip-12"></div>
      <div class="strip-13"></div>
      <div class="strip-14"></div>
      <div class="strip-15"></div>
      <div class="strip-16"></div>
      <div class="strip-17"></div>
      <div class="strip-18"></div>
      <div class="strip-19"></div>
      <div class="strip-20"></div>
      <div class="strip-21"></div>
      <div class="strip-22"></div>
      <div class="strip-23"></div>
      <div class="strip-24"></div>
    </div>
  </div>
</div>

CSS 标记：

#container {
  width: 100%;
  height: 100%;
  perspective: 900px;
}
#frame {
  position: relative;
  top: 50%;
  left: 50%;
  width: 23px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}
.strips {
  transform-style: preserve-3d;
  transition: all 420ms;
}
.strips > div {
  position: absolute;
  top: -60px;
  left: -12px;
  margin-top: -10px;
  background: limegreen;
  border: solid darkgreen;
  border-width: 5px 0;
  height: 120px;
  width: 24px;
}
.strip-1 { transform: rotateY(0deg) translateZ(85px); }
.strip-2 { transform: rotateY(15deg) translateZ(85px); }
.strip-3 { transform: rotateY(30deg) translateZ(85px); }
.strip-4 { transform: rotateY(45deg) translateZ(85px); }
.strip-5 { transform: rotateY(60deg) translateZ(85px); }
.strip-6 { transform: rotateY(75deg) translateZ(85px); }
.strip-7 { transform: rotateY(90deg) translateZ(85px); }
.strip-8 { transform: rotateY(105deg) translateZ(85px); }
.strip-9 { transform: rotateY(120deg) translateZ(85px); }
.strip-10 { transform: rotateY(135deg) translateZ(85px); }
.strip-11 { transform: rotateY(150deg) translateZ(85px); }
.strip-12 { transform: rotateY(165deg) translateZ(85px); }
.strip-13 { transform: rotateY(180deg) translateZ(85px); }
.strip-14 { transform: rotateY(195deg) translateZ(85px); }
.strip-15 { transform: rotateY(210deg) translateZ(85px); }
.strip-16 { transform: rotateY(225deg) translateZ(85px); }
.strip-17 { transform: rotateY(240deg) translateZ(85px); }
.strip-18 { transform: rotateY(255deg) translateZ(85px); }
.strip-19 { transform: rotateY(270deg) translateZ(85px); }
.strip-20 { transform: rotateY(285deg) translateZ(85px); }
.strip-21 { transform: rotateY(300deg) translateZ(85px); }
.strip-22 { transform: rotateY(315deg) translateZ(85px); }
.strip-23 { transform: rotateY(330deg) translateZ(85px); }
.strip-24 { transform: rotateY(345deg) translateZ(85px); }

Answer 3

您的问题可能有几种不同的方法。
第一个（也是最简单的）一个是有多个堆叠的圆圈，这会给你一个圆柱体的印象。
但是谁想要一个页面中有数百个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/。