Home / Questions / 16632
Accepted
Alvaro Montoro
Asked: 2020-07-14 06:30:53 +0800 CST 2020-07-14 06:30:53 +0800 CST

如何用css制作圆柱体？

  • 772

我正在使用 HTML 和 CSS 来学习/练习 2D 和 3D 转换，为此我正在绘制一个 3D 9v 堆栈（因为它简单且方形）。到目前为止，一切都很容易，因为我只需要转换来旋转和移动堆栈的不同（矩形）面。

但我发现电池中的电极是圆形的，我不知道如何使一个div（或另一个）元素呈圆形（3D 管）。我想这将是使用大量顶点“模拟”一个圆，但这似乎很棘手。

这是我到目前为止所得到的（在JSFiddle上）：

@-moz-keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(0);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);}
}
@-webkit-keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(0);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(360deg);}
}
@keyframes spin {
  from {transform:rotateY(0deg) rotateX(0) rotateZ(360);}
  to {transform:rotateY(360deg) rotateX(360deg) rotateZ(0deg);}
}

.container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position:relative;
  width:120px;
  height:200px;
  margin:100px;
}
#battery {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-animation: spin 14s infinite linear;
  -moz-animation: spin 14s infinite linear;
  animation: spin 14s infinite linear;
}
.face {
  position:absolute;
  top:0;
  left:0;
  transform-origin:0 0;
  opacity:10.6;
  overflow:hidden;
}
.face:before, .face:after, .face span:after, .face span:before {
  position:absolute;
  top:0;
  left:0;
  transform-origin: left top 0;
  display:block;
  font-family:arial,sans-serif;
  white-space: pre;
}
.large {
  width:120px;
  height:200px;
  background:#111111;
  box-sizing:border-box;
  box-shadow:inset 0px 66px 0px #CC7722;
}
.side {
  width:66px;
  height:200px;
  background:black;
  box-sizing:border-box;
  box-shadow:inset 0px 66px 0px #AA5500;
}
.short {
  width:120px;
  height:66px;
  background:#222222;
}
.top {
  box-shadow:inset 0 0 0 8px #BB6611;
}
.bottom {
  box-shadow:inset 0 0 0 8px #111111;
}
.front:before, .back:before, .right:before {
  content:"DURACELL";
  color:silver;
  transform: rotate(90deg) translate(72px, -68px);
  font-weight:bold;
  font-size:1.3em;
}
.front:after, .back:after {
  content:"ALKALINE BATTERY";
  color:silver;
  transform: rotate(90deg) translate(73px, -44px);
  font-weight:bold;
  font-size:0.5em;
}
.back:after { content:"PILE ALCALINE"; }
.right:before { transform: rotate(90deg) translate(72px, -50px) }
.right:after {
  content:"Duracell, div of P&G, Bethel, CT 06801 \a P&G Inc., Toronto, ON M5W1C5 \a Made in U.S.A. / Fabrique aux E.-U. \a 95756099";
  width:130px;
  color:silver;
  transform: rotate(90deg) translate(73px, -27px);
  font-weight:bold;
  font-size:0.29em;
  letter-spacing:-0.1px;
  line-height:1.2em;
}
.right span:before {
  content:"\2b06\a+";
  font-weight:bold;
  line-height:0.8em;
  top:20px;
  left:20px;
  font-size:1.3em;
}
.right span:after {
  content:"MAR \a 2015";
  color:#AA5500;
  transform: rotate(90deg) translate(150px, -23px);
  width:60px;
  font-weight:bold;
  font-size:0.6em;
  text-align:center;
}
.left:before {
  content:"MN1604 \a 6LR61 \a 9 VOLTS";
  line-height:1em;
  transform: rotate(90deg) translate(15px, -59px);
  font-size:0.5em;
  font-weight:bold;
  letter-spacing:-0.1px;
}
.left span:before {
  content:"Caution: do not connect improperly. Charge or dispose of in fire. Battery may explode or leak. Do not carry batteries loose in your pocket or elsewhere as burn injury could result.";
  width:120px;
  color:silver;
  transform: rotate(90deg) translate(73px, -60px);
  font-weight:200;
  font-size:0.25em;
  letter-spacing:-0.2px;
  line-height:1.2em;
  text-transform:uppercase;
  white-space: normal;
}

#battery .front { transform: rotateY( 0deg ) translateZ( 66px ); }
#battery .back { transform: rotateY( 180deg ) translateX( -120px ); }
#battery .right { transform: rotateY( 90deg ) translateZ( 120px ) translateX(-66px); }
#battery .left { transform: rotateY( -90deg ) translateZ( 0 ); }
#battery .top { transform: rotateX( -270deg ) translateZ( 0 ); }
#battery .bottom { transform: rotateX( 90deg ) translateZ( -200px ); }
<div class="container">
  <div id="battery">
    <div class="face large front"></div>
    <div class="face large back"></div>
    <div class="face side right"><span></span></div>
    <div class="face side left"><span></span></div>
    <div class="face short top"></div>
    <div class="face short bottom"></div>
  </div>
</div>

这就是它的外观：

HTML + CSS 中的电池，缺少电极

我想它可以用 SVG 或 a 来完成canvas，但我想将自己限制在 HTML+CSS3（带有 2D 和 3D 转换）。所以我的问题真的是：

  • 你能有div曲线吗？（不是一个圆圈，而是一个管子）
  • 它们可以div弯曲吗？（例如创建两个半圆并将它们连接成一个圆圈）

如果元素不能弯曲，还有什么替代方法？还是像我之前所说的那样模拟它是我唯一的选择？

html

3 Answers

  1. Best Answer

    在 CSS 中处理 3D 转换时要记住的第一件事是 html 元素没有厚度，因此不可能在 CSS 中制作具有深度的圆形、方形或其他形状，因为它们总是会缩小为平面。

    在您的示例中，堆栈由不同的平面元素组成，这些元素共同构成一个立方体，精确地给人以深度的印象以克服这一限制。

    模拟您想要的正确方法是使用带有操作此类 3D 转换的函数的画布。我建议你看一下three.js

    使用 CSS 属性创建一个平面圆形非常容易，border-radius: 50%但是通过重叠多个层来实现一个圆柱体需要很多元素（为了简单起见，可能还需要 javascript 的帮助）。这里有一个演示。

    @-moz-keyframes spin {
  from {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotateY(0deg) rotateX(0deg) rotateZ(360deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg);
  }
}
.container {
  -webkit-perspective: 1000px;
  perspective: 1000px;
  position: relative;
  width: 120px;
  height: 200px;
  margin: 100px;
}
#battery {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-animation: spin 14s infinite linear;
  -moz-animation: spin 14s infinite linear;
  animation: spin 14s infinite linear;
}
.face {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  opacity: 10.6;
  overflow: hidden;
}
.face:before,
.face:after,
.face span:after,
.face span:before {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left top 0;
  display: block;
  font-family: arial, sans-serif;
  white-space: pre;
}
.large {
  width: 120px;
  height: 200px;
  background: #111111;
  box-sizing: border-box;
  box-shadow: inset 0px 66px 0px #CC7722;
}
.side {
  width: 66px;
  height: 200px;
  background: black;
  box-sizing: border-box;
  box-shadow: inset 0px 66px 0px #AA5500;
}
.short {
  width: 120px;
  height: 66px;
  background: #222222;
}
.top {
  box-shadow: inset 0 0 0 8px #BB6611;
}
.bottom {
  box-shadow: inset 0 0 0 8px #111111;
}
.front:before,
.back:before,
.right:before {
  content: "DURACELL";
  color: silver;
  transform: rotate(90deg) translate(72px, -68px);
  font-weight: bold;
  font-size: 1.3em;
}
.front:after,
.back:after {
  content: "ALKALINE BATTERY";
  color: silver;
  transform: rotate(90deg) translate(73px, -44px);
  font-weight: bold;
  font-size: 0.5em;
}
.back:after {
  content: "PILE ALCALINE";
}
.right:before {
  transform: rotate(90deg) translate(72px, -50px)
}
.right:after {
  content: "Duracell, div of P&G, Bethel, CT 06801 \a P&G Inc., Toronto, ON M5W1C5 \a Made in U.S.A. / Fabrique aux E.-U. \a 95756099";
  width: 130px;
  color: silver;
  transform: rotate(90deg) translate(73px, -27px);
  font-weight: bold;
  font-size: 0.29em;
  letter-spacing: -0.1px;
  line-height: 1.2em;
}
.right span:before {
  content: "\2b06\a+";
  font-weight: bold;
  line-height: 0.8em;
  top: 20px;
  left: 20px;
  font-size: 1.3em;
}
.right span:after {
  content: "MAR \a 2015";
  color: #AA5500;
  transform: rotate(90deg) translate(150px, -23px);
  width: 60px;
  font-weight: bold;
  font-size: 0.6em;
  text-align: center;
}
.left:before {
  content: "MN1604 \a 6LR61 \a 9 VOLTS";
  line-height: 1em;
  transform: rotate(90deg) translate(15px, -59px);
  font-size: 0.5em;
  font-weight: bold;
  letter-spacing: -0.1px;
}
.left span:before {
  content: "Caution: do not connect improperly. Charge or dispose of in fire. Battery may explode or leak. Do not carry batteries loose in your pocket or elsewhere as burn injury could result.";
  width: 120px;
  color: silver;
  transform: rotate(90deg) translate(73px, -60px);
  font-weight: 200;
  font-size: 0.25em;
  letter-spacing: -0.2px;
  line-height: 1.2em;
  text-transform: uppercase;
  white-space: normal;
}
#battery .front {
  transform: rotateY(0deg) translateZ(66px);
}
#battery .back {
  transform: rotateY(180deg) translateX(-120px);
}
#battery .right {
  transform: rotateY(90deg) translateZ(120px) translateX(-66px);
}
#battery .left {
  transform: rotateY(-90deg) translateZ(0);
}
#battery .top {
  transform: rotateX(-270deg) translateZ(0);
}
#battery .bottom {
  transform: rotateX(90deg) translateZ(-200px);
}
#battery .electrodo1 .layer1 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-9px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer2 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-10px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer3 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-11px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer4 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-12px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer5 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-13px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer6 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-14px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo1 .layer7 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(26px) translateY(-15px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer1 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-9px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer2 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-10px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer3 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-11px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer4 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-12px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer5 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-13px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer6 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-14px) translateZ(33px) rotateX(-270deg);
}
#battery .electrodo2 .layer7 {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: goldenrod;
  transform: translateX(86px) translateY(-15px) translateZ(33px) rotateX(-270deg);
}
    <div class="container">
  <div id="battery">
    <div class="electrodo1">
      <div class="layer1"></div>
      <div class="layer2"></div>
      <div class="layer3"></div>
      <div class="layer4"></div>
      <div class="layer5"></div>
      <div class="layer6"></div>
      <div class="layer7"></div>
    </div>
    <div class="electrodo2">
      <div class="layer1"></div>
      <div class="layer2"></div>
      <div class="layer3"></div>
      <div class="layer4"></div>
      <div class="layer5"></div>
      <div class="layer6"></div>
      <div class="layer7"></div>
    </div>
    <div class="face large front"></div>
    <div class="face large back"></div>
    <div class="face side right"><span></span>
    </div>
    <div class="face side left"><span></span>
    </div>
    <div class="face short top"></div>
    <div class="face short bottom"></div>
  </div>
</div>

    仍然在旋转的某个点，当所有电极层都垂直于屏幕时，您会看到一个闪光，在此技巧变得明显。

    不同位置的堆栈比较

    作为替代方案，您可以根据计划制作六角棱镜。您使用的平面越多，您就越接近圆的图形，但您需要大量的元素来实现这一点（每边一个，几个用于模拟上层）。

    • 16

  2. 另一种制作圆柱的方法。我已经看到了几个，但是有很多div很多的 CSS 行，我喜欢 Asier 的解决方案，因为它很简单，它给了我一个尝试它的想法div。

    .cilindro {
  position: relative;
  width: 40px;
  height: 50px;
  background-color: #666;
  border-radius: 65px / 25px;
}

.cilindro:before {
  content: "";
  position: absolute;
  background-color: #ccc;
  width: 40px;
  height: 10px;
  border-radius: 65px / 15px;
  top: 0px;
}
    <div class="cilindro"></div>

    PS：阅读@devconcept 的答案后，我意识到我的示例仅适用于静态绘图，如果要旋转，则必须做一些技巧来模拟 3D 对象，这似乎并不容易。

    • 2

  3. 使用 border-radius 属性创建一个圆形 div 非常简单：

    div{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: blue;
}
    <div>
</div>

    对于圆柱体效果，您可以使用 box-shadow 属性：

        div{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: blue;
      box-shadow: 2px 2px gray, 3px 3px black, 8px 8px gray, 9px 9px black;
    }
    <div></div>

    • -1