Как делать цилиндр с css?

Я использую HTML и CSS, чтобы изучать / практиковать преобразования 2D и 3D и для этого я рисую батарейку 9v трехмерный (потому что она простая и cuadradita). До настоящего времени все было простым, потому что я только нуждался в преобразованиях, чтобы крутить и двигать различные (прямоугольные) лица батарейки.

Но я сталкиваюсь тем, что электроды батарейки круговые, и я не знаю, как делать, что один 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 ); }

и так он такой, как видят:

Pila en HTML + CSS, faltan los electrodos

Я представляю себе то, что он мог бы делаться с SVG или одним canvas, но я хочу ограничиться в HTML+CSS3 (с преобразованиями 2D и 3D). Тогда мои вопросы действительно:

  • Возможно иметь один div я изгибаю? (не круг, а труба)
  • Они могут
  • делаться div изогнутые? (p.e., чтобы создавать два полукруга и соединять их в кругу)

И если не возможно изгибать элемент: каковой могла бы быть альтернатива? Или мой единственный выбор состоит в том, чтобы симулировать это, как он говорил раньше?

18
задан 13.07.2016, 22:47
3 ответа

Первое, что ты должен учитывать, когда ты манипулируешь трехмерными преобразованиями в CSS, состоит в том, что элементы html не имеют толщины тем, что невозможно делать круг, квадрат или другую фигуру в CSS, у которого была бы глубина, так как они всегда будут сведены к плоскости.

В твоем примере батарейка составлена различными плоскими элементами, которые вместе составляют ведро давая печать глубины точно чтобы разыгрывать вышеупомянутое ограничение.

Правильный способ симулировать то, что ты хочешь, состоит с canvas в том, что он приносит функции, чтобы манипулировать этим типом трехмерных преобразований. Я рекомендую тебе бросать беглый взгляд в three.js

Создавать плоский круг с CSS - очень просто со свойством border-radius: 50% но добиваться цилиндра накладывая много слоев нуждалось бы во многих элементах (и вероятно помощь javascript, чтобы добиваться простоты). Здесь у тебя есть demo.

@-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>

Все же в каком-то моменте ротации ты увидишь сверкание, когда все слои электрода будут перпендикулярными экрану, где становится очевидным прием.

comparacion pila en posiciones diferentes

Как альтернатива ты можешь делать шестиугольную призму на основе плоскостей. Пока ты использовал больше плоскостей больше ты приблизишься к фигуре круга, но будешь нуждаться в большом количестве элементов, чтобы добиваться этого (один из-за каждой стороны и некоторых, чтобы симулировать верхний слой).

15
ответ дан 24.11.2019, 13:51
  • 1
    Хороший ответ. Вот то, что quer и # 237; чтобы читать, но представляли, что из-за ах и # 237; собирались идти выстрелы. Я попробую это шестиугольной призмы и симулировать туз и # 237; цилиндр. Спасибо. –  Alvaro Montoro♦ 14.07.2016, 14:18

Другой способ делать цилиндр. Он увидел некоторые где-то здесь, но со многими div и кучи линий CSS, решение Асиера мне понравилось, потому что она простая и я есть дала мысль это пробовать с одним 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>

P.D.: Прочитав ответ @devconcept я понял, что мой одинокий пример служит для статического рисунка, если хочется крутить, было бы нужно делать какие-то приемы, чтобы симулировать объект в 3D, он не кажется легким.

2
ответ дан 24.11.2019, 13:51
  • 1
    Как довольно индийские этот soluci и # 243; n функционируй s и # 243; это в 2D, потому что, хотя результат кажется цилиндром, он действительно s и # 243; притворное и он плоский. Ссылка, которую ты имел наверху (конечно, спасибо) - м и # 225; s то, что я ищу. –  Alvaro Montoro♦ 14.07.2016, 14:23

Создавать круговой div - очень просто используя собственность border-radius:

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

Для эффекта цилиндра podrГ-схвати использовать собственность 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
ответ дан 24.11.2019, 13:51
  • 1
    prob и # 233; и оно я не функционирует, потому что c и # 237; rculo он плоский и не трехмерный, и когда я оживляю элемент, он прекращает видеться. Кажется, что box-shadow - притворная тень, которая заканчивает тем, что вырисовывается в той же плоскости, что и элемент вместо " caer" как тень на самом деле. Если он был то и #250; ltimo podr и # 237; чтобы функционировать. Правда состоит в том, что это была хорошая идея. –  Alvaro Montoro♦ 14.07.2016, 14:38