cssrotationcalc

Use calc() in transform:rotate()

How to use calc() to determine the angle value for transform:rotate()?

The !mdn docs for the CSS calc() function states:

The calc() CSS function can be used anywhere a <length>, <frequency>, <angle>, <time>, <number>, or <integer> is required. With calc(), you can perform calculations to determine CSS property values.

However, using calc() to create an angle value for transform:rotate() isn't working for me.

The suggestion of this blog doesn't work -- transform: rotate(calc(1turn - 32deg));, nor similar variants of operations using calc() in this way.

See this codepen for verification - only the fifth <div> rotates as expected and doesn't use calc() to determine the angle.

Here is the main code from the codepen to show here:

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);
}

This same problem happens for me across the latest Chrome, Firefox Developer Edition, and Safari.

Other discussions related to this problem exist, but don't offer any solution. For example:

Solution

  • Spaces matter in calc()

    CORRECT:

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

    INCORRECT:

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

    Because 360deg / 4deg == 90 and 360deg / 4 = 90deg. And you are looking for a degrees and not a pure number.