用css转换剪裁的图像

Question

道歉，如果我的问题已经被问到，但我正在寻求旋转并将图像剪裁到用户选择的尺寸。例如，目的可以说他们可以选择2cm x 2 cm或4cm x 4cm。然后我使用css裁剪来获得正确的大小。我的同事给了我这个，但现在他已经去度假了。

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

现在我希望允许一个更漂亮的东西，为旋转的轮廓头像转动图像，所以图像像钻石一样被剪裁。

这是变换css的用途吗？我看到转换，动画，旋转和css不好。谢谢你的帮助。

Answer 1

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

transform: rotate(45deg)

如果你想让它成为一个动画，你需要先设置rotate 0，如下所示：

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

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

Answer 2

我不认为你想在这里使用transform: rotate();或类似的东西，因为图像会被侧面倾斜。我会坚持clip-path，但使用polygon代替inset。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

的问题演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;