使用 css 旋转剪辑图像

Question

如果有人问我的问题，我深表歉意，但我正在寻求旋转图像并将其裁剪为用户选择的尺寸。例如，假设他们可以选择 2 厘米 x 2 厘米或 4 厘米 x 4 厘米。然后我使用 css 裁剪来获得正确的尺寸。我的同事给我看这个，但现在他去度假了。

.avatar {
  clip-path: inset(20px 20px 20px 20px);
}

现在我希望允许一些更有趣的东西，比如像旋转一样为个人资料头像转动图像，这样图像就会像钻石一样被剪裁。

这就是 transform css 的用途吗？我看到变换、动画、旋转，但不擅长 css。感谢您的帮助。

Answer 1

如果要旋转元素，可以使用变换

transform: rotate(45deg)

如果你想让这个成为动画，你需要先设置rotate 0，像这样：

div {
  transform: rotate(0deg);
  transition: .2s;
}

div:hover {
  transform: rotate(45deg);
}

Answer 2

我认为你不想在这里使用 transform: rotate(); 或类似的东西，因为图像会倾斜到一边。我会坚持使用 clip-path 但使用 polygon 而不是 inset.

.avatar {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

<img class="avatar" src="https://via.placeholder.com/100x100">

这是使用 clip-path: inset() 和 transform: rotate();

的问题演示

.avatar {
  clip-path: inset( 20px );
  transform: rotate( -45deg );
}

<img class="avatar" src="https://via.placeholder.com/100x100">

Turn clipped image with css