Here in this code on hover text moves horizontally. I want to move it vertically but I don't know which coordinates to change. If anyone could please help me out with the same.
I want to have the line animation along with the text transform animation like the cuberto website has in the header on hover.
<body class="demo-1">
<main>
<ol class="content">
<li class="content__item">
<a href="#" class="link link--leda" data-text="Transform Vertically">
<span>Transform Vertically</span>
</a>
</li>
</ol>
</body>The horizontal animation relies on translate3d. That function takes three properties x, y, z.
In your existing code, the transformations on hover all change the x value. To move it vertically, you want to modify the y value.
Here is a quick example based on your code: https://codepen.io/29b6/pen/gOvowbw