CSS3 transform 旋转、偏移、缩放属性，CSS3 filter 滤镜，实现图像特效

喜欢ヅ旅行 2022-05-12 16:56 459阅读 0赞

**目录**

CSS3 transform 属性

rotate 2D 旋转

translate 2D 偏移

scale 2D 缩放

skew 2D 倾斜

CSS3 filter( 滤镜)

--------------------

# CSS3 transform 属性 #

1、ransform 属性向元素应用 2D 或 3D 转换，该属性允许对元素进行旋转、缩放、移动或倾斜。

<table> 
 <tbody> 
  <tr> 
   <th>默认值：</th> 
   <td>none</td> 
  </tr> 
  <tr> 
   <th>继承性：</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本：</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法：</th> 
   <td><em>object</em>.style.transform="rotate(7deg)"</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td style="width:106px;"><strong>IE</strong></td> 
   <td> <p>Internet Explorer 10 + 完全支持&nbsp;transform 属性</p> <p>Internet Explorer 9 使用 -ms-transform 属性替代（且仅适用于 2D 转换）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:106px;"><strong>Firefox</strong></td> 
   <td>Firefox 完全支持 transform 属性</td> 
  </tr> 
  <tr> 
   <td style="width:106px;"><strong>Chrome</strong></td> 
   <td>Chrome 支持替代的 -webkit-transform 属性（适用于 3D 和 2D 转换）</td> 
  </tr> 
  <tr> 
   <td style="width:106px;"><strong>Opera</strong></td> 
   <td>Opera 支持 transform 属性，但只支持 2D 转换</td> 
  </tr> 
  <tr> 
   <td style="width:106px;"><strong>Safari</strong></td> 
   <td>Safari 支持替代的 -webkit-transform 属性（适用于 3D 和 2D 转换）</td> 
  </tr> 
 </tbody> 
</table>

2、语法：transform: none|transform-functions;

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
   <th>测试</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>定义不进行转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate&amp;p=22" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>matrix(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td>定义 2D 转换，使用六个值的矩阵。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_matrix" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>matrix3d(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td> 
   <td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>translate(<em>x</em>,<em>y</em>)</td> 
   <td>定义 2D 转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>translate3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td>定义 3D 转换。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>translateX(<em>x</em>)</td> 
   <td>定义转换，只是用 X 轴的值。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatex" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>translateY(<em>y</em>)</td> 
   <td>定义转换，只是用 Y 轴的值。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translatey" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>translateZ(<em>z</em>)</td> 
   <td>定义 3D 转换，只是用 Z 轴的值。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>scale(<em>x</em>,<em>y</em>)</td> 
   <td>定义 2D 缩放转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>scale3d(<em>x</em>,<em>y</em>,<em>z</em>)</td> 
   <td>定义 3D 缩放转换。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>scaleX(<em>x</em>)</td> 
   <td>通过设置 X 轴的值来定义缩放转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scalex" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>scaleY(<em>y</em>)</td> 
   <td>通过设置 Y 轴的值来定义缩放转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scaley" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>scaleZ(<em>z</em>)</td> 
   <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>rotate(<em>angle</em>)</td> 
   <td>定义 2D 旋转，在参数中规定角度。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)</td> 
   <td>定义 3D 旋转。</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>rotateX(<em>angle</em>)</td> 
   <td>定义沿着 X 轴的 3D 旋转。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatex" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>rotateY(<em>angle</em>)</td> 
   <td>定义沿着 Y 轴的 3D 旋转。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatey" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>rotateZ(<em>angle</em>)</td> 
   <td>定义沿着 Z 轴的 3D 旋转。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotatez" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>skew(<em>x-angle</em>,<em>y-angle</em>)</td> 
   <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skew" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>skewX(<em>angle</em>)</td> 
   <td>定义沿着 X 轴的 2D 倾斜转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewx" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>skewY(<em>angle</em>)</td> 
   <td>定义沿着 Y 轴的 2D 倾斜转换。</td> 
   <td><a href="http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skewy" rel="nofollow">测试</a></td> 
  </tr> 
  <tr> 
   <td>perspective(<em>n</em>)</td> 
   <td>为 3D 转换元素定义透视视图。</td> 
   <td>测试</td> 
  </tr> 
 </tbody> 
</table>

## **rotate 2D 旋转** ##

1、rotate(angle)：定义 2D 旋转，rotate(旋转)单位为 deg(度)，如 45deg 表示旋转 45度，90deg 表示旋转 90度。

2、以被旋转元素本身中心为轴进行旋转！

![20191217171955326.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>rotate 2D 旋转</title>
        <style type="text/css">
            .div1 {
                width: 300px;
                height: 200px;
                background-color: #888888;
                position: relative;
            }
            .div2 {
                width: 200px;
                height: 50px;
                background-color: #122b40;
                position: absolute;
                left: calc(50% - 100px);
                top: calc(50% - 25px);
    
                /* 旋转元素，Internet Explorer 10、Firefox*/
                transform: rotate(45deg);
                /**浏览器兼容*/
                -ms-transform: rotate(45deg); /* Internet Explorer */
                -moz-transform: rotate(45deg); /* Firefox */
                -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
                -o-transform: rotate(45deg); /* Opera */
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            var rotateDeg = 45;//旋转的角度
            var frameId = -1;//帧动画执行回调函数之前请求浏览器的 ID，用于取消请求
            //旋转元素-动画效果
            var rotateImg = function () {
                console.log(frameId);
                $(".div2").css("transform", "rotate(" + rotateDeg + "deg)");//设置元素 css 旋转属性，改变角度
                rotateDeg += 1;//将角度加1度
                frameId = requestAnimationFrame(rotateImg);//循环回调自己
            };
            $(function () {
                //开始动画
                $("#start").click(function () {
                    rotateImg();
                });
                //结束动画
                $("#stop").click(function () {
                    cancelAnimationFrame(frameId);
                });
            });
        </script>
    </head>
    <body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <button id="start">开始动画</button>
    <button id="stop">暂停动画</button>
    </body>
    </html>

更多可以参考：[http://www.w3school.com.cn/tiy/c.asp?f=css\_transform\_rotate][http_www.w3school.com.cn_tiy_c.asp_f_css_transform_rotate]

## translate 2D 偏移 ##

1、translate(x,y)     定义 2D 图片偏移，x 表示向右偏移，负数则向相反方向(左)偏移；y 表示向下偏移，负数则向相反方向(上)偏移。

2、单位可以是像素 px。

3、x，y 可以只使用其中一个值，如 translate(20px) 表示向 x 方向偏移20px，y 方向不变；translate(20px,20px)  表示 x 方向 y 方向同时偏移 20px。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1 {
                width: 300px;
                height: 200px;
                background-color: #888888;
                position: relative;
            }
            .div2 {
                width: 200px;
                height: 50px;
                background-color: #122b40;
                position: absolute;
                left: 50%;
                top: 50%;
    
                /**x 方向反向偏移100px,y 方向反向偏移25px，效果就是div 正好位于 div 正中心*/
                transform: translate(-100px, -25px); /*IE 10,Firefox*/
                -ms-transform: translate(-100px, -25px); /* Internet Explorer 9*/
                -moz-transform: translate(-100px, -25px); /* Firefox */
                -webkit-transform: translate(-100px, -25px); /* Safari 和 Chrome */
                -o-transform: translate(-100px, -25px); /* Opera */
            }
        </style>
    </head>
    <body>
    <div class="div1">
        <div class="div2">
        </div>
    </div>
    </body>
    </html>

*  更多效果可以参考：[http://www.w3school.com.cn/tiy/c.asp?f=css\_transform\_translate][http_www.w3school.com.cn_tiy_c.asp_f_css_transform_translate]

## scale 2D 缩放 ##

1、scale(x,y) 定义 2D 缩放转换，以元素中心点进行比例缩放。

2、x，y 表示比例，无单位，如 scale(0.5,1.5) 表示 x 方向缩小 0.5 倍，y 方向大小再乘以 1.5 。

![20191217185602673.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>scale 2D 缩放</title>
        <style type="text/css">
            .div1 {
                width: 300px;
                height: 200px;
                background-color: #888888;
                position: relative;
            }
            .div2 {
                width: 200px;
                height: 50px;
                background-color: #122b40;
                position: absolute;
                left: calc(50% - 100px);
                top: calc(50% - 25px);
    
                /**x方向 缩小一半，y 方向增加一半*/
                transform: scale(0.5, 1.5); /*IE 10,Firefox*/
                -ms-transform: scale(0.5, 1.5); /* Internet Explorer 9*/
                -moz-transform: scale(0.5, 1.5); /* Firefox */
                -webkit-transform: scale(0.5, 1.5); /* Safari 和 Chrome */
                -o-transform: scale(0.5, 1.5); /* Opera */
            }
        </style>
        
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript">
            var scale = 0.01;
            var x = 0.5, y = 1.5;
            var frameId = -1;
            //旋转元素-动画效果
            var rotateImg = function () {
                console.log(frameId);
                x += scale;
                y += scale;
                if (x > 1.5 || x < 0) {
                    scale = -scale;
                }
                $(".div2").css("transform", "scale(" + x + "," + y + ")");//设置元素 css 旋转属性，改变角度
                frameId = requestAnimationFrame(rotateImg);//循环回调自己
            };
            $(function () {
                //开始动画
                $("#start").click(function () {
                    rotateImg();
                });
                //结束动画
                $("#stop").click(function () {
                    cancelAnimationFrame(frameId);
                });
            });
        </script>
    </head>
    <body>
    <div class="div1">
        <div class="div2"></div>
    </div>
    <button id="start">开始动画</button>
    <button id="stop">暂停动画</button>
    </body>
    </html>

*  更多效果可以参考：[http://www.w3school.com.cn/tiy/c.asp?f=css\_transform\_scale][http_www.w3school.com.cn_tiy_c.asp_f_css_transform_scale]

## skew 2D 倾斜 ##

1、skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换，X 与 Y 可以只使用一个

2、倾斜单位为 deg(度)，skew(45deg,10deg) 表示 x 方向倾斜45度，y方向倾斜 10度；shew(45deg) 表示 x方向倾斜45度，y 方向不变。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .div1 {
                width: 300px;
                height: 200px;
                background-color: #888888;
                position: relative;
            }
    
            .div2 {
                width: 200px;
                height: 50px;
                background-color: #122b40;
                position: absolute;
                left: calc(50% - 100px);
                top: calc(50% - 25px);
                color: white;
    
                /**x方向倾斜45度，y 方向不变*/
                transform: skew(45deg); /*IE 10,Firefox*/
                -ms-transform: skew(45deg); /* Internet Explorer 9*/
                -moz-transform: skew(45deg); /* Firefox */
                -webkit-transform: skew(45deg); /* Safari 和 Chrome */
                -o-transform: skew(45deg); /* Opera */
            }
        </style>
    </head>
    <body>
    <div class="div1">
        <div class="div2">
            万里长城
        </div>
    </div>
    </body>
    </html>

![70][]

*  更多效果可以参考：[http://www.w3school.com.cn/tiy/c.asp?f=css\_transform\_skew][http_www.w3school.com.cn_tiy_c.asp_f_css_transform_skew]

# CSS3 filter( 滤镜)  #

1、filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

2、滤镜主要是用来实现图像的各种特殊效果，这在 PS 上应用的尤为广泛。

<table> 
 <tbody> 
  <tr> 
   <th>默认值:</th> 
   <td>none</td> 
  </tr> 
  <tr> 
   <th>继承:</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>动画支持:</th> 
   <td>是。详细可查阅 <a href="http://www.runoob.com/cssref/css-animatable.html" rel="nofollow"><em>CSS 动画</em></a></td> 
  </tr> 
  <tr> 
   <th>版本:</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法:</th> 
   <td><em>object</em>.style.WebkitFilter="grayscale(100%)" <a href="http://www.runoob.com/try/try.php?filename=trycss3_js_filter" rel="nofollow">尝试一下 »</a></td> 
  </tr> 
 </tbody> 
</table>

**注意:** 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 [opacity][] 属性。

CSS 语法：

**注意:** 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

<table> 
 <tbody> 
  <tr> 
   <th>Filter</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>默认值，没有效果。</td> 
  </tr> 
  <tr> 
   <td>blur(<em>px</em>)-模糊</td> 
   <td>给图像设置高斯模糊。设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；<br> 如果没有设定值，则默认是0；参数可设置 css 长度值，不接受百分比值。</td> 
  </tr> 
  <tr> 
   <td>brightness(<em>%</em>)-亮度</td> 
   <td>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是 1。</td> 
  </tr> 
  <tr> 
   <td>contrast(<em>%</em>)-对比度</td> 
   <td>调整图像的对比度。值是0%的话，图像会全黑；值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</td> 
  </tr> 
  <tr> 
   <td> <p>drop-shadow(<em>h-shadow v-shadow blur spread color</em>)</p> <p>-阴影</p> </td> 
   <td> <p>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受&lt;shadow&gt;(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code>&lt;shadow&gt;参数如下：</code></p> <p><code><strong>&lt;offset-x&gt;</strong> <strong>&lt;offset-y&gt;</strong> (必须)</code></p> <p><code>这是设置阴影偏移量的两个 &lt;length&gt;值. <strong>&lt;offset-x&gt;</strong>&nbsp;设定水平方向距离. 负值会使阴影出现在元素左边. <strong>&lt;offset-y&gt;</strong>设定垂直距离.负值会使阴影出现在元素上方。查看<strong>&lt;length&gt;</strong>可能的单位.<br><strong>如果两个值都是0</strong>, 则阴影出现在元素正后面 (如果设置了&nbsp;<code>&lt;blur-radius&gt;&nbsp;and/or&nbsp;<code>&lt;spread-radius&gt;，会有模糊效果).</code></code></code></p> <p><code><code><code><strong>&lt;blur-radius&gt;</strong> (可选)</code></code></code></p> <p><code><code><code>这是第三个code&gt;&lt;length&gt;值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0&nbsp;(则阴影的边界很锐利).</code></code></code></p> <p><code><code><code><strong>&lt;spread-radius&gt;</strong> (可选)</code></code></code></p> <p><code><code><code>这是第四个 &lt;length&gt;值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0&nbsp;(阴影会与元素一样大小).&nbsp;<br> 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</code></code></code></p> <p><code><code><code>&nbsp;</code></code></code></p> <p><code><code><code><strong>&lt;color&gt;</strong> (可选)</code></code></code></p> <p><code><code><code>查看 &lt;color&gt;该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko&nbsp;(Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用color<strong>color</strong>属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。</code></code></code></p> </td> 
  </tr> 
  <tr> 
   <td>grayscale(<em>%</em>)-灰度级</td> 
   <td> <p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p> </td> 
  </tr> 
  <tr> 
   <td>hue-rotate(<em>deg</em>)-色相旋转</td> 
   <td> <p>给图像应用色相旋转。"设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> </td> 
  </tr> 
  <tr> 
   <td>invert(<em>%</em>)-反转</td> 
   <td> <p>反转输入图像。值定义转换的比例。100%是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> </td> 
  </tr> 
  <tr> 
   <td>opacity(<em>%</em>)-不透明度</td> 
   <td> <p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> </td> 
  </tr> 
  <tr> 
   <td>saturate(<em>%</em>)-饱和度</td> 
   <td> <p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> </td> 
  </tr> 
  <tr> 
   <td>sepia(<em>%</em>)-乌贼墨</td> 
   <td> <p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；</p> </td> 
  </tr> 
  <tr> 
   <td>url()</td> 
   <td> <p>URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。</p> <p>例如：filter: url(svg-url#element-id)</p> </td> 
  </tr> 
  <tr> 
   <td>initial</td> 
   <td> <p>设置属性为默认值，可参阅： <a href="http://www.runoob.com/cssref/css-initial.html" rel="nofollow">CSS initial 关键字</a></p> </td> 
  </tr> 
  <tr> 
   <td>inherit</td> 
   <td>从父元素继承该属性，可参阅：<a href="http://www.runoob.com/cssref/css-inherit.html" rel="nofollow">CSS inherit 关键字</a></td> 
  </tr> 
 </tbody> 
</table>

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Filter 滤镜</title>
        <style>
            .imgDiv {
                width: 200px;
                border: 2px solid gold;
                display: inline-block;
                text-align: center;
            }
            .imgDiv > img {
                min-width: 90%;
                max-width: 90%;
            }
            /*设置高斯模糊 4 像素*/
            .blur {
                -webkit-filter: blur(4px);/* Chrome, Safari, Opera */
                filter: blur(4px);
            }
            /*设置明亮度为原来的 30%，则图像更暗*/
            .brightness {
                -webkit-filter: brightness(0.30);/* Chrome, Safari, Opera */
                filter: brightness(0.30);
            }
            /*设置对比度 180%，则图像对比度更强*/
            .contrast {
                -webkit-filter: contrast(180%);/* Chrome, Safari, Opera */
                filter: contrast(180%);
            }
            /*给图像设置阴影效果，水平阴影长度为 4px，垂直阴影长度为8px，纵深阴影长度为 16px，颜色为绿色*/
            .shadow {
                -webkit-filter: drop-shadow(4px 8px 16px black);/* Chrome, Safari, Opera */
                filter: drop-shadow(4x 8px 16px black);
            }
            /*将图像转换为灰度图像，100%则完全转为灰度图像，即图像为黑白照*/
            .grayscale {
                -webkit-filter: grayscale(100%);/* Chrome, Safari, Opera */
                filter: grayscale(100%);
            }
            /*图像应用色相旋转,旋转 180度*/
            .huerotate {
                -webkit-filter: hue-rotate(180deg);/* Chrome, Safari, Opera */
                filter: hue-rotate(180deg);
            }
            /*反转输入图像，100%是完全反转*/
            .invert {
                -webkit-filter: invert(100%);/* Chrome, Safari, Opera */
                filter: invert(100%);
            }
            /*转化图像的透明程度,0 表示完全透明*/
            .opacity {
                -webkit-filter: opacity(50%);/* Chrome, Safari, Opera */
                filter: opacity(50%);
            }
            /*转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和*/
            .saturate {
                -webkit-filter: saturate(7);/* Chrome, Safari, Opera */
                filter: saturate(7);
            }
            /*将图像转换为深褐色，100%则完全是深褐色*/
            .sepia {
                -webkit-filter: sepia(100%);/* Chrome, Safari, Opera */
                filter: sepia(100%);
            }
        </style>
    </head>
    <body>
    <div class="imgDiv">
        <img src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>原图</div>
    </div>
    <div class="imgDiv">
        <img class="blur" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>高斯模糊 4 像素</div>
    </div>
    <div class="imgDiv">
        <img class="brightness" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>设置明亮度为原来的 30%</div>
    </div>
    <div class="imgDiv">
        <img class="contrast" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>设置对比度为原来的 180%</div>
    </div>
    <br>
    <div class="imgDiv">
        <img class="shadow" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>给图像设置阴影效果</div>
    </div>
    <div class="imgDiv">
        <img class="grayscale" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>将图像转换为灰度图像</div>
    </div>
    <div class="imgDiv">
        <img class="huerotate" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>图像色相旋转 180度</div>
    </div>
    <div class="imgDiv">
        <img class="invert" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>反转输入图像</div>
    </div>
    <br>
    <div class="imgDiv">
        <img class="opacity" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>转化图像的透明度为50%</div>
    </div>
    <div class="imgDiv">
        <img class="saturate" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>图像饱和度为原来的7倍</div>
    </div>
    <div class="imgDiv">
        <img class="sepia" src="https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=af18103e1cdfa9ecfd2e51115aeb903e/b03533fa828ba61ef518ba0d4c34970a304e5919.jpg">
        <div>将图像转换为深褐色</div>
    </div>
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93YW5nbWFveGlvbmcuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70][]

[20191217171955326.gif]: /images/20220504/5ecd01b9a1ca4d878972678ad1a4ec9c.png
[http_www.w3school.com.cn_tiy_c.asp_f_css_transform_rotate]: http://www.w3school.com.cn/tiy/c.asp?f=css_transform_rotate
[http_www.w3school.com.cn_tiy_c.asp_f_css_transform_translate]: http://www.w3school.com.cn/tiy/c.asp?f=css_transform_translate
[20191217185602673.gif]: /images/20220504/266fad378c09409c83381b6b12e6bed6.png
[http_www.w3school.com.cn_tiy_c.asp_f_css_transform_scale]: http://www.w3school.com.cn/tiy/c.asp?f=css_transform_scale
[70]: /images/20220504/44383791fd0a497d90feff08081aab1b.png
[http_www.w3school.com.cn_tiy_c.asp_f_css_transform_skew]: http://www.w3school.com.cn/tiy/c.asp?f=css_transform_skew
[opacity]: http://www.runoob.com/cssref/css3-pr-opacity.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly93YW5nbWFveGlvbmcuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20220504/115c50ad78cc4b3d8e859de2fe417546.png