带有calc的CSS变换属性[重复]答案

【问题标题】：CSS transform property with calc [duplicate]带有calc的CSS变换属性[重复]
【发布时间】：2015-04-21 07:40:30
【问题描述】：

我想对变换属性进行计算。是否可以为此使用 calc 功能？

类似：

 width: calc(100vw-2vw);

但为了变换

 transform: translate(calc(100vw-2vw));

（当然上面没有功能）

【问题讨论】：

你试过了吗？我不知道为什么它不起作用。
谢谢。我以前没见过。这对其他会看到我重复帖子的人有用link
@Vinc199789 我试过了，但它不起作用。你可以看到上面的链接。
@BillysGtr 好的。没有什么是动画，但我得到了 div 的位置。我所做的是删除了 calc 的前缀。（不要为转换删除它们。它们需要前缀）。这是小提琴：jsfiddle.net/ZJUEv/11。你也可以看看这个网站：developer.mozilla.org/en-US/docs/Web/CSS/calc。如果这项工作说出来，我会发布一个答案，这样你就可以关闭问题了
谢谢@Vinc199789。我阅读了 mozilla 的链接，GCyrillus 给了我一个很好的答案。你的评论也很有帮助。它说： + 和 - 运算符必须始终被空格包围。 * 和 / 运算符不需要空格，但为了保持一致性允许并建议添加空格。

【解决方案1】：

如果您尊重 calc 值之间的空格并使用带符号的空格，它会起作用：transform: translate(calc(100vw - 2vw));

div {
  border:solid;
  float:right;
  height:20vw;
  width:20vw;
  transform:translate( calc(-100vw + 25vw) );
}

&lt;div&gt;&lt;p&gt;Do not forget !&lt;br/&gt;use prefix if needed !!!&lt;/p&gt;&lt;p&gt;BTW, i float right&lt;/p&gt;&lt;/div&gt;

【讨论】：