Use Chained CSS Transforms to Position Elements
In combination with scoped CSS variables, we can use chained CSS transforms to position elements. In this example, we lay out the lines for a Tic Tac Toe board.
Jhey Tompkins: [0:00] Our lines aren't positioned correctly. We want to position two going vertically and two going horizontally. To start, let's make all of our lines start in the same position. We can do this with top 50% and left 50%. Then, if we set a transform translate(-50%, -50%), all of the lines are centered on the board.
[0:19] Two of our lines will need to be rotated 90 degrees. Then all of our lines will be shifted a little bit to the left or a little bit to the right. To do this, we can use scoped CSS variables. Let's start with a rotate(calc(var(--rotate))). We have a fallback value of , and then * -90deg. We won't see a change here until we inline a variable.
[0:41] Let's create a variable of rotate for each line and this will be = l % 2. Then, we can set that value inline on the style property, style=`--rotate: ${rotate}, like so. When we reload our page, now two of our lines are rotated by 90 degrees.
[1:00] To calculate the shift, we can use modulo and a ternary. We'll say of 2 % (l + 1) ? 1 : -1. Then we'll pass that value as an inline CSS variable too. Then we need to update our transform for that shift. We can use translateX with a value of calc(var(--shift) * (var(--size) / 3) * .5). That puts all of our lines into the correct position.
[1:35] In that final translate, we're saying, "Shift the line on the x-axis by the value of the size / 3, which would be one cell, and then half of that. We multiply it by the shift we calculated in the markup."
[1:49] For example, the first line is not rotated and shifts -1, so it goes across to the left, but our fourth line is rotated and shifts upwards because we've rotated and then we've shifted. We'd rotate and then shift up.
[2:08] In review, we can use scoped CSS variables and chained CSS transforms to position elements on a page. In our example, we're translating the elements and then we're rotating it based on a CSS variable, and then we're translating it also based on a CSS variable which gives us these different outcomes.