使用變換禁用縮放/旋轉的動畫

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設置爲0ms（默認值）不會改變任何內容。

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