Setting translate3d independent of other transform

Question

I have a series of buttons with dynamic rotations:

<button type="button" class="picker-opt" opt-index="1" style="transform: rotateX(84.64deg) translate3d(0px, 0px, 90px); transition-duration: 150ms;">1</button>
<button type="button" class="picker-opt" opt-index="2" style="transform: rotateX(63.48deg) translate3d(0px, 0px, 90px); transition-duration: 150ms;">2</button>
<button type="button" class="picker-opt" opt-index="3" style="transform: rotateX(42.32deg) translate3d(0px, 0px, 90px); transition-duration: 150ms;">3</button>

I want to change all their translateZ values, but adding this rule:

.picker-opt { translate3d(0px, 0px, 100px) !important; }

also cancels out their rotateX, which is unacceptable.

I've enabled the Chrome Experimental Web Platform to get the independent translate but it doesn't appear to include translate3d! How silly.

Answer 1

If you want them to be indpendent then put the various tranforms on different elements.

button {
 transform: translate3d(0px, 0px, 90px);
 transition-duration: 150ms;
}
button:hover {
 transform: translate3d(10px, 0px, 100px);
}

<div style="transform: rotateX(84.64deg);">
  <button type="button" opt-index="1">1</button>
</div>
<div style="transform: rotateX(63.48deg);">
  <button type="button" opt-index="2">2</button>
</div>
<div style="transform: rotateX(42.32deg);">
  <button type="button" opt-index="3">3</button>
</div>

Answer 2

You could also use custom css :

button {
  --var1 : 0;
  --var2 : 0;
  --var3 : 90px;
}
button:hover {
  --var3 : 100px
}


/* for demo purpose*/
html {height:100vh;display:flex;}
body {margin:auto;}

<button type="button" class="picker-opt" opt-index="1" style="transform: rotateX(84.64deg) translate3d(var(--var1),var(--var2),var(--var3)); transition-duration: 150ms;">1</button>
<button type="button" class="picker-opt" opt-index="2" style="transform: rotateX(63.48deg) translate3d(var(--var1),var(--var2),var(--var3)); transition-duration: 150ms;">2</button>
<button type="button" class="picker-opt" opt-index="3" style="transform: rotateX(42.32deg) translate3d(var(--var1),var(--var2),var(--var3)); transition-duration: 150ms;">3</button>

you can also set empty var with a defaut value :

var(--myVar, green)

html {
  background: var(--myVar, green);/* green if  --myVar is not set */
  transition:0.15s
}

html:hover {
  --myVar: red; /* --myVar is now set */
}