css transform without overwriting previous transform?

Question

I have an element:

elem
   transform translateY(5px) scale(1.2)

Now on hover I want it to move down an additional 5px

elem:hover
   transform translateY(5px)

Obviously this would overwrite the previous transform. Is there anyway to set it to move an additional 5 without knowing what the previous transform state is?

Thanks.

It would be cool to have something like #elem:hover { transform: add translateY(5px); }. Unfortunately, such a thing doesn't exist yet. — Tamás Bolvári
– Tamás Bolvári, Commented Oct 9, 2015 at 20:38
Since Chrome 104 there are individual transform properties such as scale: 1.5; rotate: 45deg; translate: -50%; etc. But, as of 17.03.2023 they have only 88% support on CanIUse — Seangle
– Seangle, Commented Mar 17, 2023 at 8:15

Ollie Williams · Accepted Answer · 2022-08-26 06:29:23Z

10

CSS custom properties aka CSS variables are the only answer to this (outside of using Javascript).

To add to a previous value:

div {
  --translateX: 140;
  --trans: calc(var(--translateX) * 1px);
  transform: translateX(var(--trans)) scale(1.5);
}

div:hover {
  
 --translatemore: calc(var(--translateX) + 25);
 --trans: calc(var(--translatemore) * 1px);
}

div {
  transition: .2s transform;
  width: 50px;
  height: 50px;
  background: salmon;
}

All browsers now support the ability to set transform properties individually.

edited Aug 26, 2022 at 6:29

answered Jul 2, 2017 at 9:08

Ollie Williams

2,7745 gold badges31 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mircea · Accepted Answer · 2011-09-20 22:26:56Z

4

Use the WebKitCSSMatrix object or MozCSSMatrix (I think...) to set new values trough the original object without knowing the initial transform.

http://jsfiddle.net/Cx9hH/

In this case I have an initial translate of 100px on witch I add an extra 100px:

box.style.webkitTransform = matrix.translate(100, 0);

answered Sep 20, 2011 at 22:26

Mircea

11.7k26 gold badges67 silver badges98 bronze badges

1 Comment

Harry Over a year ago

Nice, this doesn't cover all the cases but +upvote for being potentially useful for somebody.

Oluwatowo Rosanwo · Accepted Answer · 2021-10-30 21:37:26Z

1

You just have to create another div or span wrapper and set transform to that intead

answered Oct 30, 2021 at 21:37

Oluwatowo Rosanwo

3703 silver badges7 bronze badges

2 Comments

Ghost Ops Over a year ago

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review

Mechanic Over a year ago

@GhostOps this is a legit answer dude.

Tyler · Accepted Answer · 2017-04-27 01:44:44Z

0

CSS variables! https://jsfiddle.net/91q0s5h0/4/

div {
  --translateX: 10px;
  transform: translateX(var(--translateX)) scale(1.5);
}

div:hover {
  --translateX: 5px;
}

answered Apr 27, 2017 at 1:44

Tyler

1331 silver badge9 bronze badges

2 Comments

Harry Over a year ago

as far as I can tell this does not work, it replaces the 10px with the 5px instead of adding onto it.

Kokodoko Over a year ago

Also, these variables are still set in stone, and won't change dynamically when changing the translation through javascript.

cwharris · Accepted Answer · 2011-05-05 00:34:46Z

-1

You could use nested elements, and increase the translation on each on interdependently for each variable.

Although, that would get ugly pretty quick.

answered May 5, 2011 at 0:34

cwharris

18.2k4 gold badges46 silver badges64 bronze badges

Collectives™ on Stack Overflow

css transform without overwriting previous transform?

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related