[分享]css3单张图片炫酷效果

CSS3提供了许多炫酷的效果，其中之一就是单张图片的炫酷效果。下面我将介绍一些常用的CSS3单张图片炫酷效果。/ 旋转效果 / img { transition: transform 0.4s eas...

CSS3提供了许多炫酷的效果，其中之一就是单张图片的炫酷效果。下面我将介绍一些常用的CSS3单张图片炫酷效果。

/* 旋转效果 */
img {
    transition: transform 0.4s ease;
}
img:hover {
    transform: rotate(360deg);
}

/* 缩放效果 */
img {
    transition: transform 0.4s ease;
}
img:hover {
    transform: scale(1.2);
}

/* 翻转效果 */
img {
    transform-style: preserve-3d;
    transition: transform 0.4s ease-in-out;
}
img:hover {
    transform: rotateY(180deg);
}

/* 倾斜效果 */
img {
    transition: transform 0.4s ease;
}
img:hover {
    transform: skew(-20deg);
}

/* 透明度效果 */
img {
    transition: opacity 0.4s ease;
}
img:hover {
    opacity: 0.5;
} 

以上就是常用的几种CSS3单张图片炫酷效果，你可以根据实际需求来选择使用。除此之外，还有许多其他的效果，需要根据具体情况进行学习和应用。