css-transitions - 尝试在 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; }

​</p>

Answer 1

哈，原来我忘记了 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/