24、HTML与CSS图形设计：变换、滤镜与图像映射的应用

HTML与CSS图形设计：变换、滤镜与图像映射的应用

1. 变换效果的无限可能

在网页设计中，变换效果能为页面增添独特的视觉魅力。通过变换，我们可以对页面元素进行旋转、缩放、平移等操作，创造出令人眼前一亮的效果。例如，将一个对象绕y轴旋转180°，就能得到它的镜像；还可以创建虚拟的3D对象，如立方体，让用户可以从任意角度查看或旋转。变换效果的应用仅受限于我们的想象力。

2. 探索CSS滤镜

CSS滤镜是另一种改变对象外观的强大工具。滤镜可以通过修改对象的颜色、亮度、对比度或整体外观，来调整浏览器对图像、背景或边框的渲染方式。以下是一些常见的CSS滤镜函数及其描述：
| 函数 | 描述 |
| — | — |
| blur(length) | 对图像应用模糊效果，length定义模糊的像素大小 |
| brightness(value) | 调整亮度，值在0到1之间降低亮度，大于1的值增加亮度 |
| contrast(value) | 调整对比度，值在0到1之间降低对比度，大于1的值增加对比度 |
| drop-shadow(offsetX offsetY blur color) | 为图像添加投影，offsetX和offsetY是阴影的水平和垂直距离，blur是阴影模糊程度，color是阴影颜色 |
| grayscale(value) | 将图像显示为灰度图，值从0（图像不变）到1（完全灰度） |
| hue-rotate(angle) | 调整色相，angle是色轮上的角度，0deg色相不变，180deg显示互补色，360deg色相再次不变 |
| invert(value) |