The CSS tan() function takes a calculation that resolves to either an <angle> or <tnumber> and returns the result’s tangent, which ranges between -Infinity and Infinity.

.element { transform: translateY(calc(tan(15deg * var(--i)) * 5dvh)); }

The CSS translate() function shifts an element from its default position on a 2-dimensional plane

.element { transform: translate(50px, 50%); }

The translateY() function shifts an element vertically by the specified amount.

.element { transform: translateY(50%); }

The translateX() function shifts an element horizontally by the specified amount.

.element { transform: translateX(50%); }

The translateZ() function moves an element closer to or farther from the user.

.element { transform: translateZ(100px); }