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

Question

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

!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() 创建角度值对我不起作用。

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

参见 this codepen for verification - 只有第五个 <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 上也遇到过同样的问题。

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

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

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

请注意，calc() 用于 length-based translate() 转换函数家族的函数有效（参见 this Fiddle）。

translate3D() 的 z 方向在我的 Fiddle 中不起作用，但您可以使用 this page [=23= 上的 Codepen link 查看它是如何工作的]

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

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

Use calc() in transform:rotate()

css

rotation

calc