[分享]css同时实现旋转缩放图片

在前端开发中，有时候需要对图片进行旋转和缩放的效果，这时候可以使用CSS来实现。 / 将图片垂直居中 / img{ display: block; margin: 0 auto; } / 定义动画名称...

在前端开发中，有时候需要对图片进行旋转和缩放的效果，这时候可以使用CSS来实现。

 /* 将图片垂直居中 */ img{ display: block; margin: 0 auto; } /* 定义动画名称为rotate，实现旋转效果 */ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 定义动画名称为scale，实现缩放效果 */ @keyframes scale { from { transform: scale(1); } to { transform: scale(2); } } /* 给图片添加hover事件，同时执行旋转和缩放动画 */ img:hover { animation: rotate 2s linear, scale 2s linear; }

上述代码中，先将图片垂直居中，并定义两个动画名称rotate和scale，分别实现旋转和缩放效果。然后使用:hover事件触发这两个动画，通过animation属性来同时执行这两个动画，从而实现旋转缩放的效果。