CSS 变换和滤镜是创建视觉效果的强大工具。变换可以移动、旋转、缩放元素，滤镜可以调整颜色、模糊、阴影。两者结合能实现令人惊艳的效果。
Transform 变换
2D 变换
translate 位移
.move-right { transform: translateX(100px);}
.move-down { transform: translateY(50px);}
.move-both { transform: translate(100px, 50px);}
/* 百分比相对于元素自身尺寸 */.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}rotate 旋转
.rotate-45 { transform: rotate(45deg);}
.rotate-negative { transform: rotate(-90deg);}
/* 完整旋转 */.spin { transform: rotate(360deg);}scale 缩放
.scale-up { transform: scale(1.5);}
.scale-down { transform: scale(0.5);}
.scale-x { transform: scaleX(2);}
.scale-y { transform: scaleY(0.5);}
/* 镜像 */.flip-horizontal { transform: scaleX(-1);}
.flip-vertical { transform: scaleY(-1);}skew 倾斜
.skew-x { transform: skewX(20deg);}
.skew-y { transform: skewY(10deg);}
.skew-both { transform: skew(20deg, 10deg);}组合变换
变换可以组合使用，顺序影响结果：
.combined { /* 先旋转，再位移 */ transform: rotate(45deg) translateX(100px);}
.different-order { /* 先位移，再旋转（结果不同） */ transform: translateX(100px) rotate(45deg);}transform-origin
变换原点：
.origin-center { transform-origin: center; /* 默认 */}
.origin-top-left { transform-origin: top left;}
.origin-bottom-right { transform-origin: 100% 100%;}
.origin-custom { transform-origin: 20px 50px;}3D 变换
透视
/* 父元素设置透视 */.container { perspective: 1000px;}
/* 或在元素上直接设置 */.element { transform: perspective(1000px) rotateY(45deg);}透视值越小，3D 效果越强烈。
3D 旋转
.rotate-x { transform: rotateX(45deg);}
.rotate-y { transform: rotateY(45deg);}
.rotate-z { transform: rotateZ(45deg); /* 同 rotate() */}
.rotate-3d { transform: rotate3d(1, 1, 0, 45deg);}3D 位移
.translate-z { transform: translateZ(100px); /* 向观察者移动 */}
.translate-3d { transform: translate3d(100px, 50px, 30px);}3D 相关属性
.card-container { perspective: 1000px; perspective-origin: center; /* 视点位置 */}
.card { transform-style: preserve-3d; /* 保持子元素 3D */ backface-visibility: hidden; /* 隐藏背面 */}3D 翻转卡片
.flip-card { width: 300px; height: 200px; perspective: 1000px;}
.flip-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d;}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg);}
.flip-card-front,.flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 8px;}
.flip-card-front { background: #3b82f6; color: white;}
.flip-card-back { background: #10b981; color: white; transform: rotateY(180deg);}Filter 滤镜
模糊
.blur-sm { filter: blur(4px);}
.blur-md { filter: blur(8px);}
.blur-lg { filter: blur(16px);}亮度
.bright { filter: brightness(1.5); /* 150% 亮度 */}
.dark { filter: brightness(0.5); /* 50% 亮度 */}对比度
.high-contrast { filter: contrast(1.5);}
.low-contrast { filter: contrast(0.5);}灰度
.grayscale { filter: grayscale(1); /* 完全灰度 */}
.partial-gray { filter: grayscale(0.5);}色相旋转
.hue-rotate { filter: hue-rotate(90deg);}
.hue-invert { filter: hue-rotate(180deg);}反色
.invert { filter: invert(1);}透明度
.semi-transparent { filter: opacity(0.5);}饱和度
.saturated { filter: saturate(2);}
.desaturated { filter: saturate(0.5);}褐色
.sepia { filter: sepia(1);}阴影
.drop-shadow { filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.3));}
/* 与 box-shadow 的区别：适应元素形状 */.png-shadow { filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));}组合滤镜
.vintage { filter: sepia(0.3) contrast(1.1) brightness(1.1) saturate(1.3);}
.dramatic { filter: contrast(1.4) brightness(0.9) saturate(1.2);}
.faded { filter: contrast(0.9) brightness(1.1) saturate(0.8);}backdrop-filter
对元素背后的内容应用滤镜：
.glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px);}
.frosted-glass { background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(20px) saturate(180%);}毛玻璃效果
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px);}
.card-glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);}mix-blend-mode
元素与背景的混合模式：
.multiply { mix-blend-mode: multiply;}
.screen { mix-blend-mode: screen;}
.overlay { mix-blend-mode: overlay;}
.color-dodge { mix-blend-mode: color-dodge;}
.difference { mix-blend-mode: difference;}创意文字效果
.blend-text { position: relative; background: url('image.jpg'); background-size: cover;}
.blend-text h1 { color: white; mix-blend-mode: difference;}实战案例
图片悬停效果
.image-card { position: relative; overflow: hidden; border-radius: 12px;}
.image-card img { width: 100%; transition: transform 0.5s, filter 0.5s;}
.image-card:hover img { transform: scale(1.1); filter: brightness(0.7);}
.image-card .overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s;}
.image-card:hover .overlay { opacity: 1;}禁用状态
.disabled { filter: grayscale(1) opacity(0.6); pointer-events: none;}加载占位
.skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite;}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; }}头像上传预览
.avatar-preview { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; cursor: pointer;}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s, filter 0.3s;}
.avatar-preview:hover img { transform: scale(1.1); filter: brightness(0.8);}
.avatar-preview::after { content: '更换头像'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); color: white; opacity: 0; transition: opacity 0.3s;}
.avatar-preview:hover::after { opacity: 1;}导航栏毛玻璃
.navbar { position: fixed; top: 0; left: 0; right: 0; padding: 1rem 2rem; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px) saturate(180%); border-bottom: 1px solid rgba(0, 0, 0, 0.1); z-index: 100;}
/* 暗色模式 */.navbar.dark { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px) saturate(180%);}性能注意
使用 GPU 加速
.optimized { transform: translateZ(0); /* 触发 GPU 加速 */ will-change: transform;}避免滤镜滥用
/* 滤镜计算成本高，避免在大量元素上使用 */.expensive { filter: blur(10px) drop-shadow(0 0 10px black);}backdrop-filter 兼容性
.glass { background: rgba(255, 255, 255, 0.9); /* 降级方案 */}
@supports (backdrop-filter: blur(10px)) { .glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }}变换和滤镜为 CSS 带来了强大的视觉能力。合理使用它们可以创建现代、优雅的界面效果。下一篇是本系列的最后一篇，我们将学习 CSS 容器查询，它让组件级响应式成为可能。