时间戳

首页 > 解决方案 > Transform 属性中使用的无单位数是如何计算的？

html - Transform 属性中使用的无单位数是如何计算的？

问题描述

* {
  margin:0;
  padding:0;
}


.container {
  padding:5px;
  background-color: lightblue;
  font-size:20px;
  border: 1px solid;
  height:200px;
}



.inside {
  position:relative;
  top:50px;
  display:inline-block;
  background: lightcoral;
  transform: scaleY(2) scaleX(1); 
}
<div class="container">
   <p class="inside">This is a normal text.</p>
</div>

无单位数是如何计算的？大概它与字体大小有关，但显然没有乘以它。对于行高，我知道数字乘以字体大小，但对于变换属性，情况似乎并非如此。那么，它是如何计算的！？

标签： htmlcss

解决方案

transform: scaleY(x)x表示：“在 Y 轴上放大倍数”

作为对此定义的经验反思，您可以检查以下代码：

function insertHeightAsContent(elementId) {
  const element = document.getElementById(elementId);
  const height = element.getBoundingClientRect().height;
  element.innerHTML = `My height is ${height}px`;
}

insertHeightAsContent('original');
insertHeightAsContent('scale1-5');
insertHeightAsContent('scale2');
insertHeightAsContent('scale3');
div {
  display: inline-block;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: tomato;
}

#original { margin-top: 100px }
#scale1-5 { transform: scaleY(1.5) }
#scale2 { transform: scaleY(2) }
#scale3 { transform: scaleY(3) }
<div id="original"></div>
<div id="scale1-5"></div>
<div id="scale2"></div>
<div id="scale3"></div>

推荐阅读