CSS 变量和转换答案

【问题标题】：CSS Variables and TransformsCSS 变量和转换
【发布时间】：2018-02-23 14:21:05
【问题描述】：

我在这里和通过 Google 进行了搜索，但没有找到我的问题的答案，即：“如何在 CSS 转换中使用 CSS 变量？”

在 HTML 标头中，我声明了三个 CSS 变量及其备用值

<!Doctype>
<html>
    <head>     
        <style>
              :root {
                     --AHItop      : -260px;
                     --AHIleft     :   90px;
                     --AHIRotation :  10deg;
                    }

实际的 CSS 是：

 .AHI
    {
        position        : absolute;
        top             : var(--AHItop);
        left            : var(--AHIleft);                   
        width           :  250px;
        height          :  540px;
        z-index         :    3;
    }

在 HTML 的正文中，我创建了一个 DIV 元素：

<body>
    <div style = "position: absolute; 
         left    : 0; 
         top     : 0;
         overflow: hidden;">

并在 DIV 中包含图像（然后关闭 DIV 和正文）：

        <img 
            src     = "gaugesAHI.png"               
            class   = "AHI"         
        />
    </div>
</body>

在脚本标签中，我有一些代码可以使用 CSS 变量：

<script>
    var pitch = 10;
    const elementAHI = document.querySelector('.AHI');
    elementAHI.style.setProperty('--AHItop',    pitch * 5.7 - 10);
</script>

这正是我需要和期望的。但是 - 这是问题的要点 - 我似乎无法使用相同的方法在 CSS 中包含“旋转”变换，即包含

transform       : rotate(var(--AHIrotate));

在 CSS 和

中

elementAHI.style.setProperty('--AHIrotate', pitch);

在脚本中。我在 IE 和 Chrome 中都试过了。

我不是 Javascript 方面的专家，通常更喜欢自己解决问题的挑战，但在这种情况下需要挥动白旗寻求帮助 - 任何一个都将不胜感激。

谢谢。

【问题讨论】：

我不知道你的实际代码是不是一样，但是你在顶部声明了AHIrotation，然后使用AHIrotate。
你在最后添加deg 吗？ ...实际上你有 rotate(10) 不正确，应该是 rotate(10deg)

标签： javascript html css

【解决方案1】：

好的，解决这里问题的一个好方法是将变量放入 CSS 中，看看是否有意义。

一开始你的变量是这样的

:root {
  --AHItop: -260px;
  --AHIleft: 90px;
  --AHIRotation: 10deg;
}

所以你的 CSS 等于

.AHI {
  position: absolute;
  top: -260px;
  left: 90px;
  width: 250px;
  height: 540px;
  z-index: 3;
  transform: rotate(10deg);
}

这很有意义并且工作正常，接下来让我们看看你的javascript在做什么。

var pitch = 10;
const elementAHI = document.querySelector('.AHI');
elementAHI.style.setProperty('--AHItop', pitch * 5.7 - 10);
elementAHI.style.setProperty('--AHIrotate', pitch);

前 2 行不需要任何锻炼，后 2 行需要一点。

--AHItop = pitch * 5.7 - 10
--AHItop = 10 * 5.7 - 10
--AHItop = 57 - 10
--AHItop = 47

而下一行就更简单了

--AHIrotate = pitch
--AHIrotate = 10

当我们将新变量放入 CSS 中时，我们得到了这个

.AHI {
  position: absolute;
  top: 47;
  left: 90px;
  width: 250px;
  height: 540px;
  z-index: 3;
  transform: rotate(10);
}

我们可以看到我们失去单位的问题。 --AHItop 需要 px，--AHIrotat 需要 deg。我们可以很简单地在 JS 中添加它。

elementAHI.style.setProperty('--AHItop', (pitch * 5.7 - 10)+'px');
elementAHI.style.setProperty('--AHIrotate', pitch+'deg');

插入这些更改后，CSS 似乎能够弄清楚发生了什么。

我希望一切都有意义?

【讨论】：

太棒了。谢谢！
如果你觉得我的回答对你有帮助，你能accept my answer吗？谢谢?