javascript - 旋转期间 HTML 元素呈现不佳

我有一个用 html 编写的简单的 Sudoko 游戏。我有一个 9 行 9 列的表格，上面有不同的数字，玩家可以切换他们的位置。完成后，他单击一个按钮，确认表格单元格是合法的数独板。如果表格是已解决的数独，则所有单元格都应使用 SetInterval 函数向右旋转。

但是，某些单元格的渲染速度不如其他单元格。下排的单元格有时会停止旋转。我该如何解决这个问题？

这是我的代码:

<body>

<table id="SudukoTable">
    <tr>
        <td class="One" id="C1" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C2" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C3" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C4" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C5" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C6" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C7" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C8" onclick="SwitchWith(this)">1</td>
        <td class="One" id="C9" onclick="SwitchWith(this)">1</td>       
    </tr>
     <tr>
        <td class="Two" id="C10" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C11" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C12" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C13" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C14" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C15" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C16" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C17" onclick="SwitchWith(this)">2</td>
        <td class="Two" id="C18" onclick="SwitchWith(this)">2</td>        
    </tr>
     <tr>
        <td class="Three" id="C19" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C20" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C21" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C22" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C23" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C24" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C25" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C26" onclick="SwitchWith(this)">3</td>
        <td class="Three" id="C27" onclick="SwitchWith(this)">3</td>        
    </tr>
     <tr>
        <td class="Four" id="C28" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C29" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C30" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C31" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C32" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C33" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C34" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C35" onclick="SwitchWith(this)">4</td>
        <td class="Four" id="C36" onclick="SwitchWith(this)">4</td>            
    </tr>
     <tr>
        <td class="Five" id="C37" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C38" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C39" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C40" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C41" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C42" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C43" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C44" onclick="SwitchWith(this)">5</td>
        <td class="Five" id="C45" onclick="SwitchWith(this)">5</td>        
    </tr>
     <tr>
        <td class="Six" id="C46" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C47" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C48" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C49" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C50" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C51" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C52" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C53" onclick="SwitchWith(this)">6</td>
        <td class="Six" id="C54" onclick="SwitchWith(this)">6</td>            
    </tr>
     <tr>
        <td class="Seven" id="C55" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C56" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C57" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C58" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C59" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C60" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C61" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C62" onclick="SwitchWith(this)">7</td>
        <td class="Seven" id="C63" onclick="SwitchWith(this)">7</td>         
    </tr>
     <tr>
        <td class="Eight" id="C64" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C65" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C66" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C67" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C68" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C69" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C70" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C71" onclick="SwitchWith(this)">8</td>
        <td class="Eight" id="C72" onclick="SwitchWith(this)">8</td>          
    </tr>
     <tr>
        <td class="Nine" id="C73" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C74" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C75" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C76" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C77" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C78" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C79" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C80" onclick="SwitchWith(this)">9</td>
        <td class="Nine" id="C81" onclick="SwitchWith(this)">9</td>              
    </tr>

</table>
<button id="CheckBtn" onclick="RoateAll()">Finished</button>

这是我的 javascript 文件:

function RotateAll() {

setInterval(function () {
    angle++;

    for (var i = 1; i < 82; i++) {

        var a = document.getElementById("C" + i);
        a.style.webkitTransform = "rotate("+angle+"deg)"

    }
}, 60);

这是我的表格在其单元格旋转多次后的样子:

enter image description here

最佳答案

您应该使用 3d 变换来启动硬件加速!

#SudukoTable td {
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);

   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;

   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   perspective: 1000;
}

查看演示 - http://jsfiddle.net/iancwoodward/sT7UJ/4/

3D 变换专用于 3D(显然)，但是当您通过激活第 3 轴(即 Z 轴或 translateZ)来启动它们时，它会产生同时启动 OpenGl 驱动程序的副作用，从而使您可以访问硬件加速。换句话说，您正在使用 3D 处理器在您的计算机中渲染动画而不是正常的软件渲染。其他 2 个属性用于修复某些浏览器中的抖动动画，因为它们有时会尝试呈现对象的两面，即使您只打算显示一侧。

关于javascript - 旋转期间 HTML 元素呈现不佳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23646753/

javascript - 旋转期间 HTML 元素呈现不佳

上一篇：javascript - 落后的 JavaScript - 优化或更便宜的功能的机会

下一篇：javascript - 类似于 Amazon 的产品图片库 - jQuery？