html – Setting translate3d independent of other transform-ThrowExceptions

Exception or error:

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.

How to solve:

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>

###

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 */
}

Leave a Reply

Your email address will not be published. Required fields are marked *