- var text = "Drink more water!";
- var sides = 10;

.bottle
  .bottle__sides
    - sides = Math.ceil(sides/2) + 1;
    - while (sides--) {
      .bottle__side
        - for (var t = 0; t < text.length; ++t) {
          span=text[t]
        - }
    - }

$sides: 10;
$transforms:
  // z-pos (ch), angle (deg), y-scale
  (2      0 1) 
  (2      0 1) 
  (2.25 -30 1) 
  (2.75 -30 1.3) 
  (3.25 -30 1.5) 
  (3.5    0 1.75) 
  (3.5    0 1.75) 
  (3.5    0 1.75) 
  (3.3   15 1.5) 
  (3     15 1.4) 
  (2.8    0 1.3) 
  (2.8    0 1.3) 
  (3    -15 1.4) 
  (3.3  -15 1.5) 
  (3.5    0 1.75) 
  (3.5    0 1.75) 
  (3.25  15 1.5);

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: calc(24px + (36 - 24)*(100vw - 320px)/(1280 - 320));
}
body {
  background: #0b46da;
  color: #ffffff;
  display: flex;
  font: bold 1em/1.5 "DM Mono", monospace;
  height: 100vh;
  text-transform: uppercase;
}
.bottle {
  margin: auto;
  perspective: 25em;
  position: relative;
  width: 11em;
  height: 11em;
  &__sides, &__side {
    position: absolute;
    top: 50%;
    left: 0;
    transform-style: preserve-3d;
  }
  &__sides {
    animation: spin 1s linear infinite;
    top: 0;
    width: 100%;
    height: 100%;
    transform: rotateZ(90deg) rotateX(-90deg);
  }
  &__side {
    display: flex;
    $visibleSides: ceil($sides/2) + 1;
    @for $s from 1 through $sides {
      &:nth-child(#{$s}) {
        $rotateX: 360deg/$sides * ($s - 1);
        transform: translateY(-50%) rotateX($rotateX);
      }
    }
    span {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      display: inline-block;
      width: 1ch;
      @for $c from 1 through length($transforms) {
        &:nth-child(#{$c}) {
          transform:
            translateZ(0ch + nth(nth($transforms,$c),1)) 
            rotateY(0deg + nth(nth($transforms,$c),2)) 
            scaleY(nth(nth($transforms,$c),3));
        }
      }
    }
  }
}

@keyframes spin {
  from {
    transform: rotateZ(90deg) rotateX(-90deg);
  }
  to {
    transform: rotateZ(90deg) rotateX(-90deg + 360deg/$sides);
  }
}