javascript - 创建了一个 jar 头幻灯片(JS 和 JQuery)但移动 jar 头有困难

Question

我在这里有我的代码笔，所以很容易理解我想做什么，但是当光标悬停在 jar 头上时， jar 头放大器到屏幕但在错误的位置。我创建了一个移动它的功能，因此它可以很好地显示，但它似乎不起作用？我在这里做错了什么？

https://codepen.io/Rosstopherrr/pen/GVRvxJ

const getElement = (selector) => document.querySelector(selector);
  const createElement = (tag) => document.createElement(tag);
  // const addBackground1 = document.style['background'] = 'url ("https://i.postimg.cc/BZ8rj2NM/sleve.png")';

  const addSideStyle = ($side, i) => {
      let deg = 3.75 * i;
      let bgPosition = 972 - (i * 10.125);

      $side.style['background-position'] = bgPosition + 'px 0';
      $side.style['-webkit-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
      $side.style['-moz-transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
      $side.style['transform'] = 'rotateY(' + deg + 'deg) translateZ(154px)';
  };

  const createBottle = () => {
      const $bottle = createElement('div');
      $bottle.classList.add('bottle');
      const $bottleLabel = createBottleLabel();

      for (let i = 0; i < 96; i = i + 1){
          let $bottleSide = createBottleSide(i);
          $bottleLabel.append($bottleSide);
      }

      $bottle.append($bottleLabel);

      return $bottle;
  };

  const createBottleLabel = () => {
      const $bottleLabel = createElement('div');
      $bottleLabel.classList.add('label');

      return $bottleLabel;
  }

  const createBottleSide = (i) => {
      const $bottleSide = createElement('div');
      $bottleSide.classList.add('side');
      addSideStyle($bottleSide, i);

      return $bottleSide;
  };

  const changeBottleSize = (clickFn) => {
    const _bottle = createElement('div');
    _bottle.classList.add('bottle');

    _bottle.style['transform'] = 'scale(0.9)';
    return _bottle;
  }

  const moveBottle = (moveFn) => {
    const _moveBottle = createElement('div');
    _moveBottle.classList.add('bottle');

    _moveBottle.style['left'] = "-1000px";
    return _moveBottle;
  }

  const clickFn = () => {
    const $bottleSize = getElement('.container');
    const $bottle1 = changeBottleSize();
    const $bottle2 = changeBottleSize();
    const $bottle3 = changeBottleSize();

    $bottleSize.style['transform'] = 'scale(0.9)';
    return $bottleSize;
  }

  const moveFn = () => {
      const $bottleMove = getElement('.container');
      const $move1 = moveBottle();

      $bottleMove.style['left'] = "-1000px";
      return $bottleMove;
  }

  const initApp = () => {
      const $container = getElement('.container');
      const $bottle1 = createBottle();
      const $bottle2 = createBottle();
      const $bottle3 = createBottle();

      [$bottle1, $bottle2, $bottle3].forEach(($bottle, i) => {
        $bottle.classList.add('bottle' + i);
      });

      $container.append($bottle1, $bottle2, $bottle3);  
  };

  initApp();

Answer 1

translate3d(350px, 190px, 40px)

尝试从

中删除上述属性

.bottle:hover {
      transform: rotateX(0deg)
        rotateY(0deg)
        rotateZ(0deg)
        translate3d(350px, 190px, 40px)
        scale(0.5);
    }