时间戳

首页 > 解决方案 > rotate() 将图像的中心从光标移开

html - rotate() 将图像的中心从光标移开

问题描述

有问题的视频

这是 JSFiddle 代码：

  1. 这很好用，图像的中心位于光标处

#button {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}
<html>
  <head>
  </head>
  <body>
    <img id="button" src="https://s3.envato.com/files/274494335/01.jpg" widht="100" height="100" />
  </body>
  <script>
    let moveitem = document.getElementById('button');
    const MoveButton = (e) => {
      moveitem.style.left = e.pageX + 'px';
      moveitem.style.top = e.pageY + 'px';
    }
    document.addEventListener('mousemove', MoveButton);
  </script>
</html>

  1. 这不像我需要的那样工作，图片从光标向右下移动并单独旋转，我需要图片在光标中旋转

#button {
    margin: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<html>
  <head>
  </head>
  <body>
    <img id="button" src="https://s3.envato.com/files/274494335/01.jpg" widht="100" height="100" />
  </body>
  <script>
    let moveitem = document.getElementById('button');
    const MoveButton = (e) => {
      moveitem.style.left = e.pageX + 'px';
      moveitem.style.top = e.pageY + 'px';
    }
    document.addEventListener('mousemove', MoveButton);
  </script>
</html>

如何仅使用 css 解决此问题？

标签： htmlcss

解决方案

关键帧动画应用的属性将覆盖之前设置的任何属性。

在您的情况下，应用旋转动画会覆盖transform应用于#button. 所以transform: translate(-50%, -50%);被替换为transform: rotate(0deg);.

要解决此问题，请更新旋转动画以包含平移：

@keyframes rotation {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

transform-origin其他人提到问题是transform-origin: center center;由#button.

推荐阅读