Disable animation on scaling/rotation with transform

Question

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.

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.

NickyTheWrench · Accepted 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+ */
}

JSFiddle Demo

Disable animation on scaling/rotation with transform

Answers (1)

Related Questions