title: Transform: rotate doesn't work in Safari
body: <p>I want to create a flipbox which rotate from front to back - on the front side there is a text and also on the back side.The problem is that even though it rotates, both texts from front and back side are visible together when the box rotates. And the text from the back side is visible at first instead the text from the front side. Maybe someone has an idea why? Everything is working without problems in Chrome.</p>
  
  <pre><code>.box {
     width: 155px;
     height: 125px;
     position: relative;
     display: inline-block;
     padding: 5px;
     line-height: 20px;
  }
  
  .box-in {
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all .5s;
   }
  
  .box-front {
    background-color: transparent;
    z-index: 1;
    backface-visibility: hidden;
  }
  
  .box-back {
    background-color: #F5F5F5;
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index: 1;
    backface-visibility: hidden;
    line-height: 30px;        
  }
  
  .box:hover .box-front {
    -ms-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  .box:hover .box-back {
    -ms-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>            &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-in box-front"&gt;
                          &lt;div&gt;jQuery&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;Bootstrap&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;RWD&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="box-in box-back"&gt;level: &lt;br&gt; &lt;/div&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-in box-front"&gt;
                          &lt;div&gt;SASS&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;GULP&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;JavaScript&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="box-in box-back"&gt;level: &lt;br&gt; &lt;/div&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"&gt;
                  &lt;div class="box"&gt;
                      &lt;div class="box-in box-front"&gt;
                          &lt;div&gt;AJAX&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;WordPress&lt;/div&gt; &lt;br&gt;
                          &lt;div&gt;JSON&lt;/div&gt; 
                      &lt;/div&gt;
                      &lt;div class="box-in box-back"&gt;level: &lt;br&gt; &lt;/div&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>