Question

嘿大家，我正试图让我的.flip div翻转一下旋转，但我所拥有的不起作用，我不确定我做错了什么。非常感谢一些帮助。感谢。

JS：

$("#a1, #a2, #a3, #a4").hover(function(){
  $(".flip").css("background-color","yellow");
  $(".flip").css("transform":"(180deg)");
  },function(){
  $(".flip").css("background-color","#00FF00");
  $(".flip").css("transform":"");
});

HTML：

<body>
  <div id="tile_wrapper">

    <div id="a1" class="tile a one">
      <div class="frame">
        <div class="flip"></div>
      </div>
    </div>

    <div id="a2" class="tile a two">
      <div class="frame">
        <div class="flip"></div>
      </div>
    </div>

    <div id="a3" class="tile a three">
      <div class="frame">
        <div class="flip"></div>
      </div>
    </div>

    <div id="a4" class="tile a four">
      <div class="frame">
        <div class="flip"></div>
      </div>
    </div>
</div>

CSS：

html, body, .frame, .flip {
   width: 50px;
   height: 50px;
   margin: 0;
}

#tile_wrapper {
   width: 232px;
   height: 50px;
}


.tile {
   display: inline-block;
   float: left;
   height: 50px;
   width: 50px;
   padding: 4px;
}

.tile {
   -webkit-perspective: 100px;
   -moz-perspective: 100px;
   -o-perspective: 100px;
   perspective: 100px;
}

.flip {
   transition: background-color 0.6s ease-out;
   background-color: #00FF00;
}

.frame {
   -webkit-transition: 0.6s;
   -webkit-transform-style: preserve-3d;
   -moz-transition: 0.6s;
   -moz-transform-style: preserve-3d;
   -o-transition: 0.6s;
   -o-transform-style: preserve-3d;
   transition: 0.6s;
   transform-style: preserve-3d;
   position: relative;
}

Answer 1

使用这个JS，你忘了告诉它旋转Y：

$("#a1, #a2, #a3, #a4").hover(function(){
  $(".flip").css("background-color","yellow");
  $(".frame").css("transform","rotateY(180deg)");
  },function(){
  $(".flip").css("background-color","#00FF00");
  $(".frame").css("transform","rotateY(0)");
});

无法通过css旋转div（＆＃34;转换＆＃34;：＆＃34;（180deg）＆＃34;）;

1 个答案: