创建了一个罐头幻灯片(JS和JQuery)，但难以移动罐头

Question

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

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);
    }