时间戳

首页 > 解决方案 > 使用css旋转图像而不绕圈移动

html - 使用css旋转图像而不绕圈移动

问题描述

我有一张风力涡轮机的图像，我想旋转它。下面的代码将完成这项工作，但是风力涡轮机围绕一个圆圈旋转。我怎样才能让它不绕圈旋转？请有任何建议

<!DOCTYPE html>
<html>
<head>
  <style>
    .rotate { 
      animation: rotation 3s infinite linear;
    }
    @keyframes rotation {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <img src="./blackwindturbine.png" class="rotate" width="200" height="200" />
</body>
</html>

标签： htmlcss

解决方案

旋转变换的默认行为是围绕其中心旋转元素。您可以通过设置transform-origin属性来更改它。

https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

您应该在图像编辑器中找到旋转中心的坐标。

<!DOCTYPE html>
<html>
<head>
  <style>
    .rotate { 
      animation: rotation 3s infinite linear;
      transform-origin: 50% 63.67%; // (vertical center) / (image height) * 100 = (percentage)
    }
    @keyframes rotation {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <img src="https://cdn2.iconfinder.com/data/icons/industry-3/512/rotor-512.png" class="rotate" width="200" height="200" />
</body>
</html>

推荐阅读