CodePen

HTML

            
              <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              $tile-size: 100px; // play with it!
$column-cap: 3; // that one too

ul {
  width: $tile-size * $column-cap;
  position: relative;
  top: 100px;
  left: 100px;
  @include transform-origin( $tile-size*($column-cap - 1) $tile-size 0 );
  @include transform( rotate(-90deg) translateY( -$tile-size*($column-cap - 2) ) );
}
li {
  box-sizing: border-box;
  float: right;
  width: $tile-size;
  height: $tile-size;
  background:
    linear-gradient(
      rgba(255,0,0,0.4),
      rgba(255,0,0,0.4)
    ),
    url(http://placekitten.com/g/100/100);
  color: white;
  text-align: center;
  font-size: 50px;
  line-height: $tile-size;
  font-weight: bold;
  border: 1px solid white;
  @include transform( rotate( 90deg) );
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................