Установка translate3d независимо от других преобразований - PullRequest
Новая
       32

Установка translate3d независимо от других преобразований

0 голосов
/ 23 февраля 2020

У меня есть серия кнопок с динамическими поворотами c: 

<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! Как глупо.

Ответы [ 2 ]

1 голос
/ 23 февраля 2020

Вы также можете использовать пользовательские 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(--myVar, green)


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

html:hover {
  --myVar: red; /* --myVar is now set */
}
1 голос
/ 23 февраля 2020

Если вы хотите, чтобы они были независимыми, поместите различные преобразования в разные элементы. 

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