旋转期间 HTML 元素呈现不佳答案

【问题标题】：Poor rendering of HTML elements during rotation旋转期间 HTML 元素呈现不佳
【发布时间】：2014-05-14 06:02:03
【问题描述】：

我有一个用 html 编写的简单的 Sudoko 游戏。我有一个 9 行 9 列的表格，上面有不同的数字，玩家可以切换他们的位置。完成后，他单击一个按钮，验证表格单元格是合法的数独板。如果表格是已解决的 sudoko，则所有单元格都应使用 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);

}

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

【问题讨论】：

标签： javascript html rendering

【解决方案1】：

您应该使用 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 个属性用于修复某些浏览器中的抖动动画，因为它们有时会尝试渲染对象的两侧，即使您只打算显示一侧。

【讨论】：

我将您的代码添加到我的 css 文件中，它成功了。您能否解释一下您所写的内容，什么是 3d 变换？我这里没有立方体或 3d 对象，只有一个简单的表格。谢谢。
见this article
我已经用解释更新了我的答案，这是一个非常好的技巧，尤其是在为移动设备编程时要牢记。（除非您使用硬件加速，否则几乎所有动画在移动设备上都很糟糕）
顺便说一句，您编写的网站 jsfiddle 的代码在 google chrome 上运行良好。为什么它在 IE 上不起作用？
Ie8 本身不支持 css3。大多数 Web 开发人员所做的要么接受这一点并继续前进，要么找到所谓的 shiv 或 poly fill 来为旧版浏览器提供新功能。但是，您要小心那些，因为它们也会导致减速。顺便说一句，您正在使用 WebKit 转换属性，我认为它仅适用于 WebKit 浏览器，即不是 WebKit。

【解决方案2】：

您是否尝试过其他浏览器？你在什么设备上测试？也许它与图形速度有关。尝试增加angle+=5 看看是否有帮助。

仅供参考，有一些拼写错误，但我认为您正在测试没有拼写错误。例如：

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

在RotateAll() 中缺少t

function RotateAll() {

缺少结束}

你应该设置angle = 0;（它没有在你的代码中定义）

请注意，对于 Firefox，您可以使用：

    a.style.MozTransform = "rotate("+angle+"deg)";

【讨论】：