试图在H1类的悬停时创建CSS转运

Question

我以前做过此操作，但目前不起作用，我无法弄清楚原因。我希望第一个在悬停在悬停时旋转的H1。这是我的代码

http://jsfiddle.net/ylxtd/1/

html

   <div id="headLine">
    <h1 class="fitText"><span class="highLight">Austin Kitson</span></h1>
    <h2 class="fitText"><span class="highLight">Marketing & Sales</span></h2>
  </div>
 </section>

CSS

#headLine {
  position: relative;
  top: 10em;
  margin-left:auto;
  margin-right:auto;
  width:100%;
  text-align:center;
 }
  #headLine .fitText {
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s; 
    padding:1em;
}
  #headLine .fitText:hover {
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    transform: rotate(3deg); }
  #headLine .highLight {
    background: rgba(151, 173, 191, 0.7);
    padding: 0.3em;
    color: #ebe6e0; }

Answer 1

ha，事实证明我忘记了Safari -webkit-transform: rotate(3deg);的供应商前缀，我正在使用Safari，愚蠢的我。我一直在做这些事情。

Answer 2

使用此代码：它奏效了我

    #headLine .fitText {
    -webkit-transition: 1.5s all ease;
            -moz-transition: 1.5s all ease;
            -o-transition: 1.5s all ease;
    transition: 1.5s all ease; 
}
  .fitText:hover {
    -webkit-transform: rotate(3deg);
        -moz-transform: rotate(3deg);
        -o-transform: rotate(3deg);
    transform: rotate(3deg); 
}

这是链接http://jsfiddle.net/ylxtd/7/