Transform: translate head scratcher

having some trouble here :frowning:

what does transform and translate do alone and with each other?

what does transform: translateY() and transform: translateX() do for me?

what happens when i use both positive and negative numbers in the ()

kindly pass on 2 or 3 examples

this is new to me, so please go slow and simple for me :slight_smile:

Maybe give an example of what you’re having trouble with. What are you trying to do?

2 Likes

They do nothing alone. :slight_smile:

The transform is the property name and the translate is the value you apply to it. It’s as if you said what does position and absolute have to do with each other. One is the property and one is the value. they will do nothing on their own.

e.g.

color:red;
position: ??????

The [transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS.

transform:translateX(20px) translateY(40px)

that will move the element 20px along the X axis and 40px down the Y axis. It will not change the flow of the document and that means the element may overlap anything in the way. The rest of the page is drawn as though the element was never moved.

Note that all values need to applied at once if needed.

e.g.

  transform: translate(30px, 20px) rotate(20deg);

You could not say this instead:

  transform: translate(30px, 20px);
  transform: rotate(20deg);

All you get is the last one with the value of rotate as it overwrites the translate.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.