设置独立于其他转换的translate3d

Question

我有一系列动态旋转的按钮：

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

我想要更改它们的所有translateZ值，但添加以下规则：

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

也取消了他们的rotateX，这是不可接受的。

我已经启用了Chrome实验网络平台来获得独立的translate，但它似乎没有包含translate3d！多傻啊。

Answer 1

如果你希望它们是独立的，那么就把不同的变换放在不同的元素上。

​

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

您还可以使用自定义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>

​

您还可以使用默认值设置空的var：

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

​