在 transform:rotate() 中使用 calc()

Question

如何使用calc()来确定 的角度值transform:rotate()？

CSScalc()函数的!mdn 文档指出：

该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 中，我也遇到了同样的问题。

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

• 在 Firefox 中使用 transform() 和 calc()
• calc() 在颜色和变换函数中不起作用

Answer 1

使用

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

代替：

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

因为 360deg / 4deg == 90 和 360deg / 4 = 90deg。而且您正在寻找学位而不是纯粹的数字。