使用变换禁用缩放/旋转动画

Question

我在一个页面上制作国际象棋游戏，我正在尝试使用css变换翻转整个棋盘（div）。我首先尝试旋转或缩放（1，-1）两者都工作，但制作一个小烦人的动画。

我想要的是摆脱这个动画。我正在动态添加和删除我的div的类的CSS代码：

.rotated {
    -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(180deg);  /* IE 9 */
    -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
    transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

我不是在寻找transition-delay，变换和过渡不是一回事。将transition-delay设置为0毫秒（默认值）并没有改变任何内容。

Answer 1

您没有发布HTML代码，但如果您只是将.rotated类添加到主div中 - 您还必须将此类添加到单个棋子div中。

例如，如果您使用jQuery添加类......它看起来像这样：

$("button").click(function() {
  $("#container").toggleClass("rotated");
  $("div.white").toggleClass("rotated");
  $("div.black").toggleClass("rotated");
});

.chessboard {
  width: 640px;
  height: 640px;
  margin: 20px;
  border: 25px solid #333;
}
.black {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #999;
  font-size: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.white {
  float: left;
  width: 80px;
  height: 80px;
  background-color: #fff;
  font-size: 50px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.rotated {
  -webkit-transform: rotate(180deg);
  /* Chrome, Safari 3.1+ */
  -moz-transform: rotate(180deg);
  /* Firefox 3.5-15 */
  -ms-transform: rotate(180deg);
  /* IE 9 */
  -o-transform: rotate(180deg);
  /* Opera 10.50-12.00 */
  transform: rotate(180deg);
  /* Firefox 16+, IE 10+, Opera 12.10+ */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button>Toggle Board</button>
<div id="container">
  <div id="chessboard" class="chessboard">
    <!-- 1st -->
    <div class="white">&#9820;</div>
    <div class="black">&#9822;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9819;</div>
    <div class="white">&#9818;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9822;</div>
    <div class="black">&#9820;</div>
    <!-- 2nd -->
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <div class="black">&#9821;</div>
    <div class="white">&#9821;</div>
    <!-- 3th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 4st -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 5th -->
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <!-- 6th -->
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <div class="black"></div>
    <div class="white"></div>
    <!-- 7th -->
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <div class="white">&#9817;</div>
    <div class="black">&#9817;</div>
    <!-- 8th -->
    <div class="black">&#9814;</div>
    <div class="white">&#9816;</div>
    <div class="black">&#9815;</div>
    <div class="white">&#9813;</div>
    <div class="black">&#9812;</div>
    <div class="white">&#9815;</div>
    <div class="black">&#9816;</div>
    <div class="white">&#9814;</div>
  </div>
</div>

JSFiddle Demo