My current challenge involves manipulating a pseudo ::after element using translate3d
If I hardcode the values, it's straightforward:
div::after {
...
transform: translate3d(40px, 40px, 0);
}
Now, I want to dynamically set the value for the X direction using JavaScript. Here's what I attempted:
div::after {
...
transform: translate3d(attr(distance-to px), 40px, 0);
}
Within the HTML:
<div distance-to="40"></div>
However, my approach doesn't seem to be yielding the desired result. Can someone offer any suggestions or guidance?