CSS變量和轉換

Question

我已經在這里和通過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>

在Script標記中，我有一些代碼可以使用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中嘗試過了。

我不是Java專家，通常更喜歡為自己解決問題的挑戰，但是在這種情況下，需要揮舞白旗並尋求幫助-對此將不勝感激。

謝謝。

Answer 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似乎可以確定正在發生的情況。

我希望一切都有意義🙂

CSS變量和轉換

問題描述

1 個解決方案

解決方案1
0 已采納 2018-02-23 15:32:49

CSS變量和轉換

問題描述

1 個解決方案

解決方案1 0 已采納 2018-02-23 15:32:49

解決方案1
0 已采納 2018-02-23 15:32:49