无法通过css（“ transform”：“（（180deg）”））旋转div；

Question

http://codepen.io/kaigenji/pen/peyjL http://codepen.io/kaigenji/pen/peyjL

Hey everyone, I'm trying to get my .flip divs to flip through rotateY, but what I have isn't working and I'm not sure what I'm doing wrong. 大家好，我想让我的.flip div通过RotateY进行翻转，但是我无法使用，并且不确定自己在做什么错。 Would very much appreciate some help. 非常感谢您的帮助。 Thanks. 谢谢。

JS: 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: 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: 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

Use this JS, you are forgetting to tell it to rotateY: 使用此JS，您将忘记告诉它rotateY：

$("#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（“ transform”：“（（180deg）”））旋转div；

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-09-01 04:50:22

无法通过css（“ transform”：“（（180deg）”））旋转div；

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-09-01 04:50:22

解决方案1
0 已采纳 2014-09-01 04:50:22