Use Chained CSS Transforms to Position Elements

Jhey Tompkins
InstructorJhey Tompkins
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 4 years ago

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.

egghead
egghead
~ 11 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today