Winter Winter - 2 months ago 11
CSS Question

Disable animation on scaling/rotation with transform

I'm making a chess game in a page and I'm trying to flip the whole board (a div) using the css transform. I first tried rotate or scale(1, -1) both are working but makes a small annoying animation.

Rotate

What I want is to get rid of this animation. CSS code of the class I'm dynamically adding and removing to my divs:

.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+ */
}


I am not looking for
transition-delay
, transforms and transitions aren't the same thing. Setting
transition-delay
to 0ms (default value) didn't change anything.

Answer

You didn't post your HTML code, but if you are only adding the .rotated class to the main div - you must also add this class to the individual chess piece divs.

For example, if you were using jQuery to add the class ...it would look something like this:

$("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

Comments