小编And*_*ndu的帖子

我可以在CSS的Transform:Scale函数中使用Calc吗?

我正在尝试计算适用于父母内部的孩子的正确比例,但是我不能calc()transform: scaleCSS函数内部使用。我已经使用javascript完成了此功能,但我对纯CSS解决方案感兴趣,以避免尽可能多地使用脚本来膨胀页面。

示例: CSS

   .anyclass{
     height:250px; /*this value can change dinamically */
     transform:scale(calc(100% / 490 )); /*is using height value*/
   }
Run Code Online (Sandbox Code Playgroud)

此定义返回一个无效的属性值。其他用途,例如笔译:

.anyclass{
transform:translate(calc(100% - 50px ));
}
Run Code Online (Sandbox Code Playgroud)

没问题。无论如何,我可以仅使用CSS使用calc来计算div的正确比例吗?

编辑:为了更好地说明它,因为findind的计算结果是0到1之间的值,所以这不是问题。如果使用百分比,我只会得到无效的属性值。

测试1,我尝试使用CSS3变量,但在Scale函数中没有结果

--height: calc(100% + 0px);
/* height: calc(var(--height) / 490); Calculates the right value: 0.5 */
--soom: calc(var(--height) / 490);
/* height: var(--soom); has the right value: 0.5 */
transform: scale(var(--soom)); /*Does not operate in the value stored in --soom*/
Run Code Online (Sandbox Code Playgroud)

它似乎接受chrome中的值,但不操作比例尺。

ZOOM CSS属性似乎只能在chrome中正常工作。这很好。

zoom: calc(100% / …
Run Code Online (Sandbox Code Playgroud)

transform scale css3 css-calc

5
推荐指数
1
解决办法
1万
查看次数

标签 统计

css-calc ×1

css3 ×1

scale ×1

transform ×1