css transformar sin sobrescribir la transformación anterior?

Question

que tienen un elemento:

elem 
    transform translateY(5px) scale(1.2) 

Ahora en vuelo estacionario que desea que se mueva hacia abajo un adicional de 5px

elem:hover 
    transform translateY(5px) 

Obviamente, esto podría sobrescribir transformar el anterior. ¿Hay alguna forma de configurarlo para mover 5 adicionales sin saber cuál es el estado de transformación anterior?

Gracias.

Answer 1

propiedades personalizadas CSS aka variables de CSS son la única respuesta a esta (fuera de la utilización de Javascript).

Para añadir a un valor anterior:

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

Answer 2

Usted podría utilizar elementos anidados, y aumentar la traducción en cada uno de forma interdependiente para cada variable.

Aunque, eso se pondría muy rápido.

Answer 3

Utilice el objeto WebKitCSSMatrix o MozCSSMatrix (creo ...) para establecer nuevos valores a través del objeto original sin conocer la transformación inicial.

http://jsfiddle.net/Cx9hH/

En este caso tengo una inicial traducir de 100px de bruja agrego un extra 100px:

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

Answer 4

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

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

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