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.

user128511 · Accepted Answer · 2020-02-23 01:32:25Z

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>

G-Cyrillus · Accepted Answer · 2020-02-23 01:51:57Z

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

Collectives™ on Stack Overflow

Setting translate3d independent of other transform

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related