主页 / 问题 / 1385874
Accepted
Михаил Камахин
Asked:2022-07-26 18:42:55 +0000 UTC2022-07-26 18:42:55 +0000 UTC

如何在 CSS 中计算数字的模数

  • 772

我可以通过 css 计算模块吗？
我有这个表达式y = -34 * abs(x - 0.5) + 17 (x 从 0 变为 1)
这是这样一个函数的图表，你可以看到：https ://www.desmos.com/calculator/ 4zdruwvikn?lang= Common crawl en
我想用 CSS 计算，可以吗？

const blockNode = document.querySelector('.block');

const y = blockNode.computedStyleMap().get('transform')[0].y;

document.write(`${y.value}${y.unit}`);
.block {
  --x: 0;
  --y: calc(1px + 2px);
  transform: translate(0px, var(--y));
  
  background-color: red;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}
<div class="block">
</div>

css

1 个回答

  1. Best Answer

    我做到了：事实证明 CSS 中的 max 函数有效，我可以使用
    为什么我使用 max - 要找到数字的模数，您需要比较数字本身及其加法倒数（简单地说 -> 相乘乘 -1) 并选择较大的

    const blockNode = document.querySelector('.block');

const y = blockNode.computedStyleMap().get('transform')[0].y
document.write(`${y.value}${y.unit}`);
    @property {}

.block {
  --x: 0.5;
  --xPx: var(--x) * 1px;
  --leftAbsX: calc( 1 * (var(--xPx) - 0.5px) );
  --rightAbsX: calc( -1 * (var(--xPx) - 0.5px) );
  --abs: max( var(--leftAbsX), var(--rightAbsX) );
  --y: calc(-1 * 34 * var(--abs) + 17px);
  transform: translate(0px, var(--y));
  
  background-color: red;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
}
    <div class="block">
</div>

    为什么这样做，以动画为例：

    const blockNode = document.querySelector('.block');
const infoNode = document.querySelector('.info');

requestAnimationFrame(anim);

function anim(time) {
  const angle = blockNode.computedStyleMap().get('transform')[0].angle;
  infoNode.textContent = `${Math.round(angle.value)}${angle.unit}`;
  requestAnimationFrame(anim);
}
    @property --x {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.block {
  --x: 0;
  --leftAbsX: calc( 1 * (var(--x) - 0.5) );
  --rightAbsX: calc( -1 * (var(--x) - 0.5) );
  --abs: max( var(--leftAbsX), var(--rightAbsX) );
  --deg: 17deg;
  --rotate: calc(-2 * var(--deg) * var(--abs) + var(--deg));
  
  transform: rotate(var(--rotate));
  animation: anim 2s linear infinite alternate-reverse;
  
  background-color: red;
  width: 50px;
  height: 50px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  color: white;
  font-size: 20px;
}

@keyframes anim {
  0% {
    --x: 0;
    background-color: red;
  }
  100% {
    --x: 1;
    background-color: black;
  }
}
    <div class="block"></div>
<div class="info"></div>

    • 4

相关问题