Используйте calc() в transform:rotate()

Как использовать calc() для определения значения угла для transform:rotate()?

В документации !mdn для функции CSS calc() указано:

Функцию calc() CSS можно использовать везде, где требуются <length>, <frequency>, <angle>, <time>, <number> или <integer>. С помощью calc() вы можете выполнять вычисления для определения значений свойств CSS.

Однако использование calc() для создания значения угла для transform:rotate() у меня не работает.

Предложение этого блога не работает -- transform: rotate(calc(1turn - 32deg));, ни аналогичные варианты операций с использованием calc() таким образом.

См. эту кодовую ручку для проверки — только пятая <div> чередуется, как и ожидалось и не использует calc() для определения угла.

Вот основной код из codepen, чтобы показать здесь:

div {
  height: 200px;
  width: 200px;
  background-color: red;
}

.one {
  transform: rotate(calc(1turn - 32deg));
}

.two {
  transform: rotate(calc(360deg - 90deg));
}

.three {
  transform: rotate(calc(360deg/4deg));
}

.four {
  transform: rotate(calc(22deg + 23deg));
}

.five {
  transform: rotate(45deg);
}

Та же проблема возникает у меня в последних версиях Chrome, Firefox Developer Edition и Safari.

Другие обсуждения, связанные с этой проблемой, существуют, но не предлагают никакого решения. Например:


css rotation calc
person Brian Zelip    schedule 02.01.2017    source источник
comment
360deg/4deg выглядит неправильно   -  person Banzay    schedule 02.01.2017
comment
Вы знаете, что поворот квадрата на 90° или его приращение (во втором и третьем примерах) не покажет заметной разницы? Оси симметрии квадрата отстоят друг от друга на 90°.   -  person Terry    schedule 02.01.2017
comment
Единственная проблема, с которой вы столкнулись, это 360deg/4deg, и это потому, что вы ищете 360deg / 4 (обратите внимание на пробел и удаление deg на 4)   -  person Dekel    schedule 02.01.2017

Ответы (2)


arrow_upward
7
arrow_downward

Использовать

.three {
    transform: rotate(calc(360deg / 4));
}

вместо:

.three {
    transform: rotate(calc(360deg/4deg));
}

Потому что 360 градусов / 4 градуса == 90 и 360 градусов / 4 = 90 градусов. И вы ищете градусы, а не чистое число.

person Mifort    schedule 02.01.2017

arrow_upward
1
arrow_downward

Я также столкнулся с той же проблемой и также попробовал функцию calc() внутри других угловых функций transform, таких как skewX и skewY, как в Chrome (v59.0), так и в FF (v54.0). В обоих случаях функция skew не искажалась, как ожидалось.

Обратите внимание, что calc() функции, используемые для семейства на основе длины, translate() функции преобразования действительно работают (см. этой скрипке).

Z-направление translate3D() не работает в моем Fiddle, но вы можете увидеть, как оно работает, используя ссылку Codepen на эта страница

Обратите внимание, как правильно работает skewX() для #div1 в качестве жестко запрограммированного угла, но если вы перепишете это, используя calc() в качестве аргумента (например, попробуйте calc(-45deg + 1rad) ), это сломает css для #div1.

person The One and Only ChemistryBlob    schedule 24.07.2017