如何使用calc()确定transform:rotate()的Angular 值？
!mdn docs for the CSS calc() function声明：calc() CSS函数可用于需要<length>、<frequency>、<angle>、<time>、<number>或<integer>的任何位置。使用calc()，您可以执行计算以确定CSS属性值。
但是，使用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开发者版和Safari上也遇到了同样的问题。
其他关于这个问题的讨论也存在，但没有提供任何解决方案。例如：
2条答案
按热度按时间7uzetpgm1#
空格在
calc()中很重要正确：
不正确：
因为360 deg/ 4deg == 90和360 deg/ 4 = 90deg，你要找的是一个度，而不是一个纯数字。
r7knjye22#
我也遇到过同样的问题，也在Chrome（v59.0）和FF（v54.0）上尝试过其他Angular
transform函数中的calc()函数，如skewX和skewY。在这两种情况下，skew函数都没有像预期的那样倾斜。注意，用于 * 基于长度的 *
translate()变换函数族的calc()函数 * 确实 * 有效（参见this Fiddle）。translate3D()的z方向在我的Fiddle中不起作用，但您可以使用this page上的Codepen链接查看它的工作方式注意
skewX()如何在#div1作为硬编码Angular 时正常工作，但是如果使用calc()作为参数重写（例如，尝试calc(-45deg + 1rad)），它会破坏#div1的css。