在Translate中使用CSS Calc函数

Question

目前我尝试在calc()内使用CSS transform: translate功能，但我没有运气。

transform: translate((calc(100vw/4))px, (calc(100vh/8))px) scale(1.333)

这也不可能，或者我的语法在这里完全错了吗？

Answer 1

从https://developer.mozilla.org/en-US/docs/Web/CSS/calc开始，你需要混合这样的值。

width: calc(100% - 80px);

Answer 2

你需要修改语法吗？喜欢

transform: translate(((calc(100vw/4))px), (calc(100vh/8))px) scale(1.333)

Answer 3

对于想知道我们是否可以在转换中使用calc()的人们，答案是是的，我们可以。

如何使用calc（）函数？

要了解如何正确使用它，最好read the MDN's documentation。

它将在任何地方使用吗？

答案是否定的。有几个已知问题：

  

  
• Firefox不支持宽度：表格单元格上的calc（）。
  
• Firefox <48在行高，笔划宽度，stroke-dashoffset和stroke-dasharray属性内不支持calc（）。
  据报
• IE＆Edge不支持'flex'内的calc。 （未经较早版本测试）。
  
• Safari和iOS Safari（版本6和7）不支持calc（）中的视口单位（vw，vh等）。
  
• IE11不支持用calc（）设置的过渡值。
  
• 据报告，IE11在生成的内容中不正确支持calc（）。
  
• 据报道，IE11在使用带有嵌套表达式的calc（）时遇到了麻烦（即，其舍入方式不同）。
  
• IE10，IE11和Edge <14不支持在转换内使用calc（）。
  
• 当calc（）用于任何值时，IE 9-11都不会渲染盒子阴影。
  
• 当具有calc（）属性的div的子级具有相同的继承属性时，IE10崩溃。
  
• IE 9-11和Edge不支持宽度：表格单元格上的calc（）。
  
• Firefox在颜色函数上不支持calc（）。
  

来源：Can I use。