Question

我以前做过这个，但它目前无法正常工作，我无法弄清楚原因。我希望第一个h1在略微悬停时旋转。这是我的代码

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

哈，结果我忘记了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/

尝试在h1类的悬停时创建css转换

2 个答案: