CODEWITHSUNDEEP
htmlcsshtml5-canvascss-shapes
user3820621
user3820621

Reputation: 337

create cylinder shape in pure css 3d

I was working on canvas 3D shapes I am very new to this. I am trying to create Pure css3d cylinder without any plugin.

Here is what I am trying and with the output code, I am getting a circle.

CSS Code:

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 code

<div>&nbsp;</div>

Can some one help me.

Upvotes: 7

Views: 25011

Answers (3)

allenski
allenski

Reputation: 1853

Answer that provides ACTUAL example in 3D:

Final result looks like so:

Green 3D Cylinder

JSfiddle demo: https://jsfiddle.net/allenski/xyfhag8d/ (added animation for fun).

HTML markup:

<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 markup:

#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); }

Upvotes: 5

Marco Allori
Marco Allori

Reputation: 3304

there are some advanced examples like these:
http://x.dtott.com/3d/
http://cssdeck.com/labs/pure-css-3d-primitives

and some useful CSS shapes like these:
http://css-tricks.com/examples/ShapesOfCSS/

personally I built this simple one 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>

and you can see a DEMO

Upvotes: 14

gion_13
gion_13

Reputation: 41533

There might be a couple of different aproaches on your problem.
The first (and simplest) one would be to have multiple stacked circles that would give you the impression of a cylinder.
But who wants hundreds of divs in a page just to render a simple graphic module? You can use multiple box-shadow values on a single element to simulate multiple circles that eventually simulates the cylinder: 

div {
    box-shadow: black 0px 0px 1px,
        black 1px 1px 1px,
        black 2px 2px 1px,
        ...
        black 99px 99px 1px,
        black 100px 100px 1px;
}

Here's a fiddle with this example: http://jsfiddle.net/gion_13/nDCme/.

Upvotes: 1

Related Questions