css图片旋转弹出 |css3延时效果

.rotate {
transition: all 0.3s ease-in-out;
}
.rotate:hover {
transform: rotate(360deg) scale(1.2);
}
.popup {
transition: all 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
position: absolute;
top: -10px;
left: -10px;
}
.rotate:hover .popup {
visibility: visible;
opacity: 1;
top: -50%;
left: 120%;
}

以上是css代码，接下来来一步步解释：

首先是图片旋转部分，大家给图片添加旋转和放大的效果，transition: all 0.3s ease-in-out;表示过渡效果，让旋转更加流畅；而transform: rotate(360deg) scale(1.2);表示旋转角度为360度，同时放大1.2倍。

接下来是弹出部分，先将弹窗的可见性和透明度设为0，位置设置为图片的左上角，.popup {visibility: hidden; opacity: 0; position: absolute; top: -10px; left: -10px;}，当鼠标悬停在图片上时，触发.rotate:hover .popup，将弹窗位置调整为相对于图片中心右侧，同时可见性和透明度变为1，top: -50%; left: 120%; visibility: visible; opacity: 1;。

这样，当鼠标悬停在图片上时，图片会旋转和放大，同时弹出一个弹窗，为网站增加了一些生动和趣味性。