Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="topic"><span class="adjuster"><span class="content">topic1</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic2</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic3</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic4</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic5</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic6</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic7</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic8</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic9</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic10</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic11</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic12</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic13</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic14</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic15</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic16</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic17</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic18</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic19</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic20</span></span></div>
</div> 

SassMeister-input.scss

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

$rotation: 8;

@mixin ferrisWheel($radius, $item-width, $selectors, $rotate: 0) {
  $circumference: $radius * 3.14159 * 2;
  $angles-per-item: 360 * $item-width / $circumference;
  
  $total-items: floor(360 / $angles-per-item);
  $angles-per-item: 360 / $total-items;
  $item-width: $angles-per-item * $circumference / 360;

  .#{map-get($selectors, wheel)},
  .#{map-get($selectors, spoke)},
  .#{map-get($selectors, hinge)},
  .#{map-get($selectors, gondola)} {  
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: transform;  
  }
  
  .#{map-get($selectors, spoke)} {
    height: $radius;
    position: absolute;
    width: $item-width;
    left: 50%;
    text-align: center;
    top: 0;
    -webkit-transform-origin: bottom center;
  }
  
  @for $i from 1 through $total-items {
    $angle: ($i - 1)*$angles-per-item;
    .#{map-get($selectors, spoke)}:nth-child(#{$i}) {
      -webkit-transform:  translateX(-1/2 * $item-width) rotate(#{$angle}deg);
       .#{map-get($selectors, gondola)} {
         display: block;
         -webkit-transform: rotate(#{-1 * $angle}deg);
       }
    } 
  }
  
  .#{map-get($selectors, spoke)}:nth-child(#{$total-items}) ~ .#{map-get($selectors, spoke)} {
    display: none;
  }
  
  .#{map-get($selectors, wheel)} {
    height:  $radius;
    width:  $radius;
    -webkit-transform: rotate(#{-1 * $rotate * $angles-per-item}deg);
    -webkit-transform-origin: bottom center;
    .#{map-get($selectors, hinge)} {
      display: block;
      -webkit-transform: rotate(#{$rotate * $angles-per-item}deg);
    }
  }  
}

@include ferrisWheel(400px, 150px, (
  spoke: 'topic', 
  gondola: 'content', 
  hinge: 'adjuster', 
  wheel: 'container'
), $rotation);

SassMeister-output.css

.container,
.topic,
.adjuster,
.content {
  -webkit-transition-duration: 0.5s;
  -webkit-transition-property: transform;
}

.topic {
  height: 400px;
  position: absolute;
  width: 157.0795px;
  left: 50%;
  text-align: center;
  top: 0;
  -webkit-transform-origin: bottom center;
}

.topic:nth-child(1) {
  -webkit-transform: translateX(-78.53975px) rotate(0deg);
}
.topic:nth-child(1) .content {
  display: block;
  -webkit-transform: rotate(0deg);
}

.topic:nth-child(2) {
  -webkit-transform: translateX(-78.53975px) rotate(22.5deg);
}
.topic:nth-child(2) .content {
  display: block;
  -webkit-transform: rotate(-22.5deg);
}

.topic:nth-child(3) {
  -webkit-transform: translateX(-78.53975px) rotate(45deg);
}
.topic:nth-child(3) .content {
  display: block;
  -webkit-transform: rotate(-45deg);
}

.topic:nth-child(4) {
  -webkit-transform: translateX(-78.53975px) rotate(67.5deg);
}
.topic:nth-child(4) .content {
  display: block;
  -webkit-transform: rotate(-67.5deg);
}

.topic:nth-child(5) {
  -webkit-transform: translateX(-78.53975px) rotate(90deg);
}
.topic:nth-child(5) .content {
  display: block;
  -webkit-transform: rotate(-90deg);
}

.topic:nth-child(6) {
  -webkit-transform: translateX(-78.53975px) rotate(112.5deg);
}
.topic:nth-child(6) .content {
  display: block;
  -webkit-transform: rotate(-112.5deg);
}

.topic:nth-child(7) {
  -webkit-transform: translateX(-78.53975px) rotate(135deg);
}
.topic:nth-child(7) .content {
  display: block;
  -webkit-transform: rotate(-135deg);
}

.topic:nth-child(8) {
  -webkit-transform: translateX(-78.53975px) rotate(157.5deg);
}
.topic:nth-child(8) .content {
  display: block;
  -webkit-transform: rotate(-157.5deg);
}

.topic:nth-child(9) {
  -webkit-transform: translateX(-78.53975px) rotate(180deg);
}
.topic:nth-child(9) .content {
  display: block;
  -webkit-transform: rotate(-180deg);
}

.topic:nth-child(10) {
  -webkit-transform: translateX(-78.53975px) rotate(202.5deg);
}
.topic:nth-child(10) .content {
  display: block;
  -webkit-transform: rotate(-202.5deg);
}

.topic:nth-child(11) {
  -webkit-transform: translateX(-78.53975px) rotate(225deg);
}
.topic:nth-child(11) .content {
  display: block;
  -webkit-transform: rotate(-225deg);
}

.topic:nth-child(12) {
  -webkit-transform: translateX(-78.53975px) rotate(247.5deg);
}
.topic:nth-child(12) .content {
  display: block;
  -webkit-transform: rotate(-247.5deg);
}

.topic:nth-child(13) {
  -webkit-transform: translateX(-78.53975px) rotate(270deg);
}
.topic:nth-child(13) .content {
  display: block;
  -webkit-transform: rotate(-270deg);
}

.topic:nth-child(14) {
  -webkit-transform: translateX(-78.53975px) rotate(292.5deg);
}
.topic:nth-child(14) .content {
  display: block;
  -webkit-transform: rotate(-292.5deg);
}

.topic:nth-child(15) {
  -webkit-transform: translateX(-78.53975px) rotate(315deg);
}
.topic:nth-child(15) .content {
  display: block;
  -webkit-transform: rotate(-315deg);
}

.topic:nth-child(16) {
  -webkit-transform: translateX(-78.53975px) rotate(337.5deg);
}
.topic:nth-child(16) .content {
  display: block;
  -webkit-transform: rotate(-337.5deg);
}

.topic:nth-child(16) ~ .topic {
  display: none;
}

.container {
  height: 400px;
  width: 400px;
  -webkit-transform: rotate(-180deg);
  -webkit-transform-origin: bottom center;
}
.container .adjuster {
  display: block;
  -webkit-transform: rotate(180deg);
}

SassMeister-rendered.html

<div class="container">
  <div class="topic"><span class="adjuster"><span class="content">topic1</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic2</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic3</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic4</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic5</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic6</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic7</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic8</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic9</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic10</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic11</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic12</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic13</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic14</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic15</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic16</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic17</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic18</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic19</span></span></div>
  <div class="topic"><span class="adjuster"><span class="content">topic20</span></span></div>
</div>