Как сделать, чтобы выписки работали одновременно?

Question

Рассмотрим квадрат div, и я обнаружил центры по вертикали и горизонтали. В событии OnMouseMove я хочу выполнить rotateX и rotateY на элементе, если центры расположены близко к верху, левому, правому и нижнему краям.Я написал код ниже и работает неуклюже:

var CSSProperties = 
`
  transition-duration: 250ms;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-property: unset;
  transform: 
`;

if (xPosition > xDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateY(${xFormula}deg);`;
}

if (xPosition < xDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateY(${xFormula}deg);`;
}

if (yPosition < yDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateX(${yFormula}deg);`;
}

if (yPosition > yDivided) {
  DOMElement.style.cssText = CSSProperties + `rotateX(${yFormula}deg);`;
}

У меня есть 2 проблемы:

1. С этим типом записи If Statement, он работает только вертикально непо горизонтали, как при удалении кодов по вертикали. Он работает по горизонтали.

2. Когда мышь приближается к углам, он работает только по горизонтали или вертикали, но не оба.

Я думаю, что моя проблема должна быть здесь, но я не могу ее решить, Любая помощь будет оценена.

Answer 1

По сути, ваш код переопределяет DOMElement.style.cssText внутри каждого оператора if.
Так что давайте скажем первый и третий оператор if, если они истинны;В этом случае преобразование будет установлено на CSSProperties + `rotateY(${xFormula}deg);`, только чтобы немедленно установить на `rotateX(${yFormula}deg);`, переопределяя предыдущее.Из-за порядка ваших операторов if, в которых вертикальный расчет идет после горизонтального, свойство вертикального преобразования (rotateX) будет переопределять горизонтальное (rotateY).

Вместо этого вы можете добавить к концу CSSProperties, так что оба преобразования будут добавлены.Тогда все, что вам нужно сделать, это установить DOMElement.style.cssText в CSSProperties, который содержит оба ваших преобразования.

var CSSProperties = 
`
  transition-duration: 250ms;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-property: unset;
  transform: 
`;

if (xPosition > xDivided) {
  CSSProperties += `rotateY(${xFormula}deg)`;
}

if (xPosition < xDivided) {
  CSSProperties += `rotateY(${xFormula}deg)`;
}

if (yPosition < yDivided) {
  CSSProperties += `rotateX(${yFormula}deg)`;
}

if (yPosition > yDivided) {
  CSSProperties += `rotateX(${yFormula}deg)`;
}

DOMElement.style.cssText = CSSProperties + ';';