Calculate Angle for Rotation in Pure CSS - css

Question

I would like to use CSS animations to move an SVG along a linear path across a full-window page with aligning the SVG to this path. Referring to the figure below with the path shown as a red line, I want to specify h in multiples of vh and w in multiples of vw, e.g. h = 30vh, w = 60vw, and calculate the angle α for rotating the SVG shown as the blue triangle.
Or course, this should be responsive and work with different window sizes. I was hoping to do all this in pure CSS.
Following tan(α) = w/h, I can use the arcus tangens function to calculate the angle α from the quotient w/h. Since trigonometric function are not available in CSS yet, I could use a series approximation for calculating the angle as demonstrated here. But the actual show-stopper seems to be the calculation of the quotient w/h as divisions in CSS require the denominator to be unitless. So, 60vw / 30vh is not allowed.
Is there a different way to calculate or set the angle in CSS? Or do I have to fall back to a JavaScript solution here?
Edit: Here is a minimal reproducible example. In order to set the rotation in the first keyframe, the actual angle α would be required. It is currently fixed to rotate(0deg) so the triangle always points upwards instead in the direction of the linear path.
body {
overflow: hidden;
}
main {
color: black;
background-color: #8dbdff;
}
svg#example {
position: absolute;
top: 0%;
left: 0%;
transform: translate(-100%, -100%);
width: 30px;
height: 30px;
animation: linear-motion 3.0s linear infinite;
}
#keyframes linear-motion {
0% {
transform: translate(0, 30vh) translateX(-100%) rotate(0deg);
}
100% {
transform: translate(60vw, 0vh) translateY(-100%);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<main class="container-fluid d-flex align-items-center min-vh-100">
<svg id="example" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100">
<path fill="#008aff" d="M 50,5 95,97.5 5,97.5 z"/>
</svg>
</main>

Answer 1

Following A Haworth's comment, I finally used vmin to create animations with fixed ratios. This ratio can then be used to pre-calculate an angle as shown in the snippet below.
This solution has some limitations but is responsive and works with different window sizes.
body {
overflow: hidden;
}
main {
color: black;
background-color: #8dbdff;
}
svg#example {
position: absolute;
top: 0%;
left: 0%;
transform: translate(-100%, -100%);
width: 30px;
height: 30px;
animation: linear-motion 3.0s linear infinite;
}
#keyframes linear-motion {
0% {
transform: translate(-100%, 40vmin) rotate(66.03deg);
}
100% {
transform: translate(90vmin, -100%) rotate(66.03deg);
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<main class="container-fluid d-flex align-items-center min-vh-100">
<svg id="example" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 100 100">
<path fill="#008aff" d="M 50,5 95,97.5 5,97.5 z"/>
</svg>
</main>