<section id="rotated-flipped">
  <h2 class="page-header">Rotated &amp; Flipped</h2>
  <div class="row">
    <div class="span3">
      A set of classes that can be used to arbitrarily rotate and flip icons.
    </div>
    <div class="span9">
      <div class="well well-large well-transparent lead">
        <i class="icon-shield"></i>&nbsp; normal<br>
        <i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
        <i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
        <i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
        <i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
        <i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
      </div>
{% highlight html %}
<i class="icon-shield"></i>&nbsp; normal<br>
<i class="icon-shield icon-rotate-90"></i>&nbsp; icon-rotate-90<br>
<i class="icon-shield icon-rotate-180"></i>&nbsp; icon-rotate-180<br>
<i class="icon-shield icon-rotate-270"></i>&nbsp; icon-rotate-270<br>
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; icon-flip-horizontal<br>
<i class="icon-shield icon-flip-vertical"></i>&nbsp; icon-flip-vertical
{% endhighlight %}
    </div>
  </div>
</section>