旋转一个div元素

Question

是否可以使用JavaScript而不是HTML5旋转div元素？

如果可以，我需要设置/更改元素的哪些属性来使其旋转？例如，div什么的？

注：当我说旋转时，是指围绕轴旋转图像，而不是每隔x毫秒显示不同的图像旋转。

- Mach

---

当你排除HTML5时，你也排除了CSS3吗？ - Sean Vieira

我不考虑使用HTML5，因为它不能在所有浏览器上运行。如果CSS3可以在所有浏览器上运行（是吗？），那么我会使用它。 - Mach

https://dev59.com/gHRC5IYBdhLWcg3wMd9S - Chris Farmiloe

IE不完全兼容CSS3和HTML5，尤其是IE9之前的版本。 - Web_Designer

在所有主要的浏览器都支持HTML 5和CSS3之前，它们在我的书中并不存在。 - The Muffin Man

@Mach 现在可以了 :) https://caniuse.com/html5semantic - CryptoAlgorithm

Answer 1

虽然这是一个老问题，但这个答案可能会对某些人有所帮助...

在所有主要的浏览器中，您可以使用专有的CSS标记旋转元素（尽管HTML5这个术语在这里并不特别相关）。

以下是使用CSS将元素旋转45度的示例：

.example {
    -webkit-transform: rotate(45deg); /* Chrome & Safari */
    -moz-transform: rotate(45deg); /* Firefox */
    -ms-transform: rotate(45deg); /* IE 9+ */
    -o-transform: rotate(45deg); /* Opera */
    transform: rotate(45deg); /* CSS3 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678, sizingMethod='auto expand'); /* IE 7-8 */
}

是的，MSIE的语法确实很糟糕。请注意 "sizingMethod='auto expand'" - 这很关键，以避免结果被裁剪。

我相当确定矩阵变换（至少在某种程度上）也受到MSIE 6的支持，但支持它们的情况比较苛刻（而且越来越难以关注8）。

- Iain Collins

---

@Zanthel，没错！看看我的答案。CSS3转IETransform。这个人真是个天才。 - Ashwin Krishnamurthy

在过滤方法中，你是从哪里得出那些值的.. M11=0.7071...？如果我想使用90度，我该如何计算新的值？ - The Muffin Man

请查看@Ashwin上面发布的URL，它可以为您计算它们（该页面还有关于此的博客文章链接）。另一个选择是css3pie.com。 - Iain Collins

你可以使用这个链接来计算IE矩阵的值： - codechurn

Answer 2

是的，可以使用CSS3而不是HTML5来旋转一个div。

您可以在CSS3 Please上尝试CSS旋转（切换.box_rotate规则）。

如需更多信息，请搜索：css rotate

如果您想要一种在所有浏览器（包括IE6）中都能工作的旋转文本方式，请尝试Raphaël。

- rsp

Answer 3

很抱歉我来晚了。但为了后人，我想发布这个：这个网站相当不错，甚至可以执行矩阵变换以对应其css3的同类功能。

- Ashwin Krishnamurthy

---

感谢您发布了一个自动生成矩阵变换的链接，我本来要回到这里做这件事的！ :) - Iain Collins

Answer 4

您可以在IE中使用矩阵来完成它。以下是一种以跨浏览器方式解决它的函数。

http://kaisarcode.com/javascript-rotate

- Daimon Kaisar

---

欢迎来到Stack Overflow！请注意，仅提供指向您自己网站/产品的裸链接在这里是不被鼓励的，有两个原因；首先，答案应该作为自包含的答案发布，而不是简单地提供一个外部网站的链接。其次，在这里进行自我宣传往往会受到反感，并且经常会被标记为垃圾邮件（特别是如果没有披露您正在链接到自己的网站/产品）。 - Andrew Barber

Answer 5

如果您想要即时完成，可以使用以下代码：
element.style.transform = "rotateZ(90deg)";
请务必在CSS语句周围使用引号。

如果您希望在一定时间内完成（比如一秒钟），您可以使用以下代码：
element.style.transition = "1s"; element.style.transform = "rotateZ(90deg)";

- cs1349459

Answer 6

以下是我的Java脚本代码，用于旋转div元素。 这里我有一个文本框在div元素内部 如果用户输入rotate，元素将开始旋转 如果用户输入stop，元素将停止。

function OnKeyUp() {
      
      let x = document.getElementById("cmd");
      x.value = x.value.toUpperCase();

        if (x.value.includes('ROTATE')) {
            Rotate('');
        }

        if (x.value.includes('STOP')) {
            //Rotate('stop');
            location.reload()
        }
    
    }
    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    async function Rotate(cmd) {
        for (i = 0; i <= 1800; i++) {

            var deg = 'rotate(' + i/5+ 'deg)'
            document.querySelector('.box').style.transform = deg;
            await sleep(1);
            if (i == 1800) {
                i = 0;
            }
            if (cmd == 'stop') {
                i = 360;
            }
        }
    }

<style>
    .box {
          rotate: 0deg;
         }
    </style>

<div class="box">
<label for="cmd">Command:</label>
  <input type="text" id="cmd" name="cmd" onkeyup="OnKeyUp()">
</div>
    
    

- Mohammed Parvez