3D Cylinder using CSS

Cylinder shape in pure CSS 3D

by Allen N.

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>

SCSS

html, 
body {
  height: 100%;
  background: #1F2227;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

#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);
  cursor: pointer;
  
  &:hover .strips {
    transform: scale(1.5);
  }
}

.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;
  transition: all 420ms;
  animation: adjustColors 5s infinite ease-in-out;
}

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

JavaScript

teams