在transform：rotate（）中使用calc（）

Question

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

!mdn docs for the CSS calc() function州：

  

calc() CSS功能可用于<length>，<frequency>，<angle>，<time>，<number>或{{1}的任何位置}} 是必须的。使用<integer>，您可以执行计算以确定CSS属性值。

但是，使用calc()为calc()创建角度值对我来说不起作用。

this blog doesn't work - transform:rotate()的建议，以及以这种方式使用transform: rotate(calc(1turn - 32deg));的类似操作变体。

请参阅this codepen for verification - 只有第五个calc()按预期旋转且不会使用<div>来确定角度。

以下是codepen中显示的主要代码：

calc()

在最新的Chrome，Firefox Developer Edition和Safari中，我遇到了同样的问题。

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

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

Answer 1

使用

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

而不是：

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

因为360deg / 4deg == 90和360deg / 4 = 90deg。你正在寻找一个学位，而不是一个纯数字。

Answer 2

我也遇到了同样的问题，并且在Chrome（v59.0）和FF（v54.0）上的其他角度calc()功能中尝试了transform功能，例如skewX和skewY 。在这两种情况下，skew函数都没有像预期的那样倾斜。

请注意，用于基于长度的 calc()转换函数系列的translate()函数有效（请参阅this Fiddle）

translate3D()的z方向在我的小提琴中不起作用，但您可以使用this page上的Codepen链接查看其工作原理

请注意skewX()作为硬编码角度#div1如何正常工作，但如果您使用calc()作为参数重写（例如，尝试calc(-45deg + 1rad)） ，它打破了#div1的css。