0

以前にこれを行ったことがありますが、現在は機能しておらず、理由がわかりません。最初の 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>

4

2 に答える 2

0

このコードを使用してください：それは私から働きました

    #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/

于 2012-12-28T10:52:47.490 に答える
0

ハ、サファリのベンダープレフィックスを忘れて、サファリ-webkit-transform: rotate(3deg);を使用していることがわかりました。私はいつもこのようなことをしています。

于 2012-12-28T01:58:47.080 に答える