css3图片特效大全 |html css划分作用域

/* 图像翻转 */
.flip-image {
backface-visibility: hidden;
perspective: 100px;
transform-style: preserve-3d;
transition: all 0.5s ease;
}
.flip-image:hover {
transform: rotateY(180deg);
}
/* 图像缩放 */
.scale-image:hover {
transform: scale(1.2);
}
/* 图像旋转 */
.rotate-image:hover {
transform: rotate(360deg);
}
/* 图像模糊 */
.blur-image:hover {
filter: blur(5px);
}
/* 图像灰度 */
.grayscale-image:hover {
filter: grayscale(100%);
}
/* 图像反转 */
.invert-image:hover {
filter: invert(100%);
}
/* 图像亮度 */
.brightness-image:hover {
filter: brightness(150%);
}
/* 图像对比度 */
.contrast-image:hover {
filter: contrast(200%);
}
/* 图像饱和度 */
.saturate-image:hover {
filter: saturate(200%);
}
/* 图像透明度 */
.opacity-image:hover {
opacity: 0.5;
}
/* 图像阴影 */
.shadow-image:hover {
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

通过以上的代码，大家可以实现图像翻转、缩放、旋转、模糊、灰度、反转、亮度、对比度、饱和度、透明度和阴影等多种CSS3图片特效大全。这些效果不仅能够为网页增添生动感，也可以提高用户的体验，赶快试试看吧！