如果有人问我的问题,我深表歉意,但我正在寻求旋转图像并将其裁剪为用户选择的尺寸。例如,假设他们可以选择 2 厘米 x 2 厘米或 4 厘米 x 4 厘米。然后我使用 css 裁剪来获得正确的大小。我的同事给我看这个,但现在他去度假了。
.avatar {
clip-path: inset(20px 20px 20px 20px);
}
现在我希望允许一些更有趣的东西,例如旋转图像为个人资料头像旋转,以便图像像钻石一样被剪裁。
这是 transform css 的用途吗?我看到变换、动画、旋转并且不擅长使用 css。感谢您的帮助。
最佳答案
我认为您不想在这里使用 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">
关于css - 使用 css 转换裁剪图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48507730/