title: CSS: 3D flip of a single letter
body: <p>What I'm trying to achieve is to 3D flip a single letter inside a text.</p>
  
  <pre><code>&lt;h1&gt;WebN&lt;span class="text-muted" id="logo-alpha"&gt;&amp;alpha;&lt;/span&gt;me&lt;/h1&gt;
  </code></pre>
  
  <p>In this particular case i want to horizontally flip <strong>α</strong> when it's hovered with the mouse.</p>
  
  <p>I tried doing the same by putting the α in an outside <code>div</code> and it works fine, but it doesn't when I try doing the same with the <code>span</code> inside <code>h1</code>.</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>#logo-alpha {
  
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transform: rotateY(0deg);
      -moz-transform: rotateY(0deg);
      -o-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
  }
  
  #logo-alpha:hover {
  
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY(180deg);
  }
  </code></pre>