After conducting thorough research both on this platform and via Google, I have yet to find a solution to my query: "how can CSS variables be utilized in a CSS transform?"
Within the HTML header, three CSS variables and their fallback values are declared:
<!Doctype>
<html>
<head>
<style>
:root {
--AHItop : -260px;
--AHIleft : 90px;
--AHIRotation : 10deg;
}
The actual CSS code is as follows:
.AHI
{
position : absolute;
top : var(--AHItop);
left : var(--AHIleft);
width : 250px;
height : 540px;
z-index : 3;
}
Within the Body of the HTML, a DIV element is created:
<body>
<div style = "position: absolute;
left : 0;
top : 0;
overflow: hidden;">
An image is then inserted into the DIV (followed by closing the DIV and body):
<img
src = "gaugesAHI.png"
class = "AHI"
/>
</div>
</body>
Contained within the Script tags is a snippet of code that utilizes the CSS variables:
<script>
var pitch = 10;
const elementAHI = document.querySelector('.AHI');
elementAHI.style.setProperty('--AHItop', pitch * 5.7 - 10);
</script>
This results in the desired outcome. However, the main issue arises when attempting to implement a 'rotate' transform within the CSS, using:
transform : rotate(var(--AHIrotate));
In the CSS and:
elementAHI.style.setProperty('--AHIrotate', pitch);
within the script. Various attempts were made using both IE and Chrome without success.
While not an expert in Javascript, I usually enjoy the challenge of problem-solving on my own. Yet, in this instance, I humbly seek assistance - any guidance provided will be greatly appreciated.
Thank you.