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.

Answer 1

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; } 

Eventually all browsers will support the ability to set transform properties individually.

• https://caniuse.com/mdn-css_properties_translate
• https://caniuse.com/mdn-css_properties_scale

Answer 2

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);