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

Question

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

!CSS calc()函数MDN文档中指出：

calc() CSS函数可用于需要<length>、<frequency>、<angle>、<time>、<number>或<integer>的任何位置。使用calc()，您可以执行计算以确定CSS属性值。

然而，对我而言，使用calc()来创建transform:rotate()的角度值是无法实现的。

这篇博客的建议不起作用 -- transform: rotate(calc(1turn - 32deg));，或使用calc()进行类似操作的变体。

请参见此Codepen以进行验证 - 只有第五个<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()在颜色和变换函数内不起作用

- Brian Zelip

---

360度/4度 看起来不对。 - Banzay

你知道将正方形旋转90度或其倍数（在你的第二个和第三个例子中）不会显示出任何明显的差异吗？正方形的对称轴相距90度。 - Terry

你所遇到的唯一问题是 360deg/4deg，这是因为你正在寻找 360deg / 4（注意空格并删除 4 上的 deg）。 - Dekel

Answer 1

calc() 中空格很重要

正确写法：

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

不正确：

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

因为 360deg / 4deg == 90，而 360deg / 4 = 90deg。你需要的是角度而不是纯数字。

- Mifort

---

我能否在这个计算中使用像vw这样的单位？transform: rotate(calc(35deg + 10vw))无法工作。 - iuliu.net

Answer 2

我也遇到了相同的问题，并尝试在Chrome(v59.0)和FF(v54.0)中使用calc()函数，将其放入其他角度的angular transform函数中，如skewX和skewY。但两种情况下，skew函数未按预期倾斜。

请注意，在基于长度的translate()变换函数系列中使用的calc()函数可行(请参见this Fiddle)。 translate3D()的z方向在我的Fiddle中无法正常工作，但您可以使用this page上的Codepen链接查看其工作方式。

请注意，skewX()在#div1中使用硬编码角度时可以正常工作，但如果您使用calc()作为参数进行重写（例如，尝试calc(-45deg + 1rad)），它将破坏#div1的CSS。

- The One and Only ChemistryBlob