Question

我希望图形旋转x度，但我无法在rotate()中输入变量。

＆＃13;

.element {
  display: inline-block;
  background-color: #0074d9;
  height: 100px;
  width: 100px;
  font-size: 1px;
  padding: 1px;
  color: white;
  margin-right: 5px;
  margin-left: 5px;
  animation: roll 3s infinite;
  transform: rotate(30deg);
  opacity: .7;
}

@keyframes roll {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}


body, html {
  height: 100%;
}


body {
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>

＆＃13;

Answer 1

我们可以尝试使用javascript实现它。见下文。

   <html>
        <head>
            <style>
                .element {
                    display: inline-block;
                    background-color: #0074d9;
                    height: 100px;
                    width: 100px;
                    font-size: 1px;
                    padding: 1px;
                    color: white;
                    margin-right: 5px;
                    margin-left: 5px;
                    animation: roll 3s infinite;
                    transform: rotate(30deg);
                    opacity: .7;
                    }

                body, html {
                    height: 100%;
                }


                body {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            </style>


        </head>
        <body>
            <div class="element">
            </div>
            <div class="element">
            </div>
            <div class="element">
            img
            </div>
        </body>
            <script>
                var d = '360';
                var createdStyleTag = document.createElement("style");
                createdStyleTag.textContent = "@keyframes roll {0% { transform: rotate(0); } 100% { transform: rotate("+d+"deg); }}";

                document.body.appendChild(createdStyleTag);
            </script>
    </html>

Answer 2

我不确定我是否理解但是要将element旋转45度，你可以这样做：

var x = '45';
element.style.transform = 'rotate(' + x + 'deg)';

如何按照用户输入的x度旋转图片？

2 个答案: