css - 在变换中使用 calc() :rotate()

Question

如何使用calc()确定 transform:rotate() 的 Angular 值？

!mdn docs for the CSS calc() function状态:

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.

但是，使用calc()为 transform:rotate() 创建 Angular 值不适合我。

this blog doesn't work的建议-- transform: rotate(calc(1turn - 32deg)); ，也没有使用 calc() 的类似操作变体就这样。

参见this codepen for verification - 只有第五个<div>按预期旋转并且不使用 calc()确定 Angular 。

以下是 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 中，我也会遇到同样的问题。

存在与此问题相关的其他讨论，但没有提供任何解决方案。例如:

• Using transform() and calc() in firefox
• calc() not working inside color and transform functions

Answer 1

空格在 calc()

中很重要

正确:

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

错误:

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

因为 360deg/4deg == 90 且 360deg/4 = 90deg。而且您正在寻找一个度数而不是一个纯粹的数字。