與濾鏡效果相關的CSS屬性

Articles

CSS 簡介

與濾鏡效果相關的CSS屬性

這篇文章解釋了與濾鏡效果相關的CSS屬性。

您可以學習如何使用和編寫像filter和transform這樣的屬性。

YouTube Video

預覽的HTML

css-effect.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-effect.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Animation</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Filter/Effect Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>filter</h3>
 23            <section>
 24                <header><h4>Original Image</h4></header>
 25                <section class="sample-view">
 26                    <img src="example.jpg" alt="Example Image" width="100">
 27                </section>
 28                <header><h4>filter: sepia(1)</h4></header>
 29                <section class="sample-view">
 30                    <img src="example.jpg" alt="Example Sepia Image" class="filtered-image-sepia" width="100">
 31                </section>
 32                <header><h4>filter: opacity(0.5)</h4></header>
 33                <section class="sample-view">
 34                    <img src="example.jpg" alt="Example Opacity Image" class="filtered-image-opacity" width="100">
 35                </section>
 36                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 37                <section class="sample-view">
 38                    <img src="example.jpg" alt="Example Filtered Image" class="filtered-image-multiple" width="100">
 39                </section>
 40            </section>
 41        </article>
 42        <article>
 43            <h3>filter-function</h3>
 44            <section>
 45                <header><h4>filter: blur(5px)</h4></header>
 46                <section class="sample-view">
 47                    <img src="example.jpg" alt="Example Blur Image" style="filter: blur(5px);" width="100">
 48                </section>
 49                <header><h4>filter: brightness(1.5)</h4></header>
 50                <section class="sample-view">
 51                    <img src="example.jpg" alt="Example Brightness Image" style="filter: brightness(1.5);" width="100">
 52                </section>
 53                <header><h4>filter: contrast(2)</h4></header>
 54                <section class="sample-view">
 55                    <img src="example.jpg" alt="Example Contrast Image" style="filter: contrast(2);" width="100">
 56                </section>
 57                <header><h4>filter: grayscale(1)</h4></header>
 58                <section class="sample-view">
 59                    <img src="example.jpg" alt="Example Grayscale Image" style="filter: grayscale(1);" width="100">
 60                </section>
 61                <header><h4>filter: hue-rotate(90deg)</h4></header>
 62                <section class="sample-view">
 63                    <img src="example.jpg" alt="Example Hue Rotate Image" style="filter: hue-rotate(90deg);" width="100">
 64                </section>
 65                <header><h4>filter: invert(1)</h4></header>
 66                <section class="sample-view">
 67                    <img src="example.jpg" alt="Example Invert Image" style="filter: invert(1);" width="100">
 68                </section>
 69                <header><h4>filter: opacity(0.5)</h4></header>
 70                <section class="sample-view">
 71                    <img src="example.jpg" alt="Example Opacity Image" style="filter: opacity(0.5);" width="100">
 72                </section>
 73                <header><h4>filter: saturate(2)</h4></header>
 74                <section class="sample-view">
 75                    <img src="example.jpg" alt="Example Saturate Image" style="filter: saturate(2);" width="100">
 76                </section>
 77                <header><h4>filter: sepia(1)</h4></header>
 78                <section class="sample-view">
 79                    <img src="example.jpg" alt="Example Sepia Image" style="filter: sepia(1);" width="100">
 80                </section>
 81                <header><h4>filter: brightness(1.2) contrast(1.5) sepia(0.5)</h4></header>
 82                <section class="sample-view">
 83                    <img src="example.jpg" alt="Example Filtered Image" style="filter: brightness(1.2) contrast(1.5) sepia(0.5);" width="100">
 84                </section>
 85            </section>
 86        </article>
 87        <article>
 88            <h3>transform</h3>
 89            <section>
 90                <header><h4>Transform: scale(1.5, 2)</h4></header>
 91                <section class="sample-view">
 92                    <div class="transform-box transform-scale">Scale</div>
 93                </section>
 94                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
 95                <section class="sample-view">
 96                    <div class="transform-box transform-skew">Skew</div>
 97                </section>
 98                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
 99                <section class="sample-view">
100                    <div class="transform-box transform-rotate">Rotate Scale</div>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>transform functions</h3>
106            <section>
107                <header><h4>Transform: translate(100px, 50px)</h4></header>
108                <section class="sample-view">
109                    <div class="transform-box transform-translate">Translate</div>
110                </section>
111                <header><h4>Transform: rotate(45deg)</h4></header>
112                <section class="sample-view">
113                    <div class="transform-box transform-rotate">Rotate</div>
114                </section>
115                <header><h4>Transform: scale(1.5, 2)</h4></header>
116                <section class="sample-view">
117                    <div class="transform-box transform-scale">Scale</div>
118                </section>
119                <header><h4>Transform: skew(30deg, 20deg)</h4></header>
120                <section class="sample-view">
121                    <div class="transform-box transform-skew">Skew</div>
122                </section>
123                <header><h4>Transform: matrix(1, 0.5, -0.5, 1, 100, 0)</h4></header>
124                <section class="sample-view">
125                    <div class="transform-box transform-matrix">Matrix</div>
126                </section>
127                <header><h4>Transform: translate3d(100px, 50px, 30px)</h4></header>
128                <section class="sample-view perspective">
129                    <div class="transform-box transform-translate3d">Translate3D</div>
130                </section>
131                <header><h4>Transform: rotate3d(1, 1, 0, 45deg)</h4></header>
132                <section class="sample-view perspective">
133                    <div class="transform-box transform-rotate3d">Rotate3D</div>
134                </section>
135                <header><h4>Transform: rotate(45deg) scale(1.5)</h4></header>
136                <section class="sample-view">
137                    <div class="transform-box transform-rotate-scale">Rotate Scale</div>
138                </section>
139            </section>
140        </article>
141        <article>
142            <h3>transform-origin</h3>
143            <section>
144                <header><h4>transform-origin: left top</h4></header>
145                <section class="sample-view">
146                    <div class="transform-box transform-origin-left-top">Transform<br>(left-top)</div>
147                </section>
148                <header><h4>transform-origin: right bottom</h4></header>
149                <section class="sample-view">
150                    <div class="transform-box transform-origin-right-bottom">Transform<br>(right-bottom)</div>
151                </section>
152                <header><h4>transform-origin: 0% 100%</h4></header>
153                <section class="sample-view">
154                    <div class="transform-box transform-origin-percent">Transform<br>(percent)</div>
155                </section>
156                <header><h4>transform-origin: 50% 50% 50px</h4></header>
157                <section class="sample-view">
158                    <div class="transform-box transform-origin-3d">Transform<br>3D</div>
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

過濾效果

`filter`屬性

 1.filtered-image-sepia {
 2    filter: sepia(1);
 3}
 4
 5.filtered-image-opacity {
 6    filter: opacity(0.5);
 7}
 8
 9.filtered-image-multiple {
10    filter: brightness(1.2) contrast(1.5) sepia(0.5);
11}

filter屬性用於在元素上應用視覺效果。您可以輕鬆地添加各種效果，例如模糊圖片或元素、調整亮度以及更改對比度。

filtered-image-sepia類應用了懷舊效果。
filtered-image-opacity類應用了不透明度效果。
filtered-image-multiple類對圖像應用了亮度、對比度和懷舊的效果。

基本語法

1filter: none | <filter-function> [<filter-function>]*;

對於filter屬性，可以指定為none或filter-function。

指定為none時不應用任何濾鏡效果。
在<filter-function>中指定要應用的濾鏡功能。可以通過空格分隔來指定多個濾鏡。

濾鏡功能的類型

`blur()`

1filter: blur(5px);

blur()函數應用了模糊效果。

值以像素(px)為單位指定，值越大，模糊的程度越強。

`brightness()`

1filter: brightness(1.5);

brightness()函數調整亮度。

值的範圍從0（完全黑暗）到1（原始亮度）指定。指定大於1的值會使元素更亮。

`contrast()`

1filter: contrast(2);

contrast()函數調整對比度。

值的範圍從0（灰度）到1（原始對比度）指定，值大於1時會增強對比度。

`grayscale()`

1filter: grayscale(1);

grayscale()函數將元素轉換為黑白。

該值的範圍從 0（原始顏色）到 1（完全單色）。

`hue-rotate()`

1filter: hue-rotate(90deg);

hue-rotate() 函數用於旋轉色相。

該值以度（deg）為單位，透過旋轉色相來調整顏色。色相的旋轉範圍是從 0deg 到 360deg。

`invert()`

1filter: invert(1);

invert() 函數用於反轉顏色。

該值的範圍從 0（原始顏色）到 1（完全反轉）。

`opacity()`

1filter: opacity(0.5);

opacity() 函數用於改變元素的透明度。

該值範圍是從 0（完全透明）到 1（不透明）。

`saturate()`

1filter: saturate(2);

saturate() 函數用於調整飽和度。

該值範圍從 0（單色）到 1（原始飽和度），設定大於 1 的值會增強飽和度。

`sepia()`

1filter: sepia(1);

sepia() 函數用於轉換為棕褐色調。

該值範圍從 0（原始顏色）到 1（完全棕褐色調）。

應用多個濾鏡

1filter: brightness(1.2) contrast(1.5) sepia(0.5);

可以應用多個濾鏡，並以空格分隔。

使用 `filter` 屬性的優勢

filter 屬性是一個強大的工具，可以輕鬆創建視覺上吸引人的元素。它具有以下優點：。

可以輕鬆添加視覺效果。
僅用 CSS 即可調整圖片，無需圖像編輯軟件。
結合動畫可以製作動態效果。

`transform` 屬性

 1.transform-box {
 2    width: 100px;
 3    height: 100px;
 4    background-color: skyblue;
 5    transition: transform 0.3s ease;
 6}
 7
 8.transform-scale:hover {
 9    /* Width 1.5 times and height 2 times */
10    transform: scale(1.5, 2);
11}
12
13.transform-skew:hover {
14    /* Skew 30 degrees on the X-axis and 20 degrees on the Y-axis */
15    transform: skew(30deg, 20deg);
16}
17
18.transform-rotate:hover {
19    transform: rotate(45deg) scale(1.5);
20}

transform 屬性用於對元素應用 2D 或 3D 轉換。可以使用 CSS 指定各種視覺轉換，例如位置、旋轉、縮放（放大/縮小）以及傾斜。transform 屬性經常與動畫結合使用，有助於創建動態 UI 元素。

在 transform-scale 類別中，將滑鼠懸停在元素上會將其寬度放大1.5倍，高度放大2倍。
在 transform-skew 類別中，將滑鼠懸停在元素上會使其在X軸旋轉30度，在Y軸旋轉20度。
在 transform-rotate 類別中，將滑鼠懸停在元素上會使其旋轉45度，並放大1.5倍。

基本語法

1transform: none | <transform-function> [<transform-function>]*;

transform 屬性指定為 none 或 transform-function。

如果指定 none，則不會應用任何變換。
使用 <transform-function> 指定變換的類型。可以通過空格分隔應用多個變換。

主要的變換函數

`translate()`

1/* Move 50px to the right and 100px down */
2transform: translate(50px, 100px);
3
4transform: translateX(50px); /* Move 50px to the right */
5transform: translateY(100px); /* Move 100px down */

translate(x, y) 函數將元素沿X軸和Y軸移動指定的距離。使用例如 px 或 % 等單位指定 x 和 y。你也可以分別使用 translateX() 或 translateY() 指定。

`rotate()`

1transform: rotate(45deg); /* Rotate 45 degrees */

rotate(angle) 函數使元素按指定的角度（deg）旋轉。

`scale()`

1/* Width 1.5 times and height 2 times */
2transform: scale(1.5, 2);
3
4transform: scaleX(1.5); /* Width 1.5 times */
5transform: scaleY(2); /* Height 2 times */

scale(x, y) 函數將元素沿X軸和Y軸縮放。x 和 y 是相對於原始大小的縮放比例。例如，scale(2, 2) 將元素尺寸放大為原始尺寸的兩倍。你可以分別使用 scaleX() 或 scaleY() 指定。

`skew()`

1/* Skew 30 degrees on the X-axis and
2   20 degrees on the Y-axis */
3transform: skew(30deg, 20deg);
4
5/* Skew 30 degrees on the X-axis */
6transform: skewX(30deg);
7
8/* Skew 20 degrees on the Y-axis */
9transform: skewY(20deg);

skew(x-angle, y-angle) 函數將元素沿X軸和Y軸以指定角度傾斜。你可以分別使用 skewX() 或 skewY() 指定。

`matrix()`

1/* Apply a special transformation */
2transform: matrix(1, 0.5, -0.5, 1, 0, 0);

matrix() 函數指定一個矩陣以同時結合多個變換。它通常與其他變換函數組合使用。

3D 變換函數

`translate3d()`

1/* Move 100px right(X-axis), 50px down(Y-axis),
2   30px forward(Z-zxis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Preserve 3D positioning of children */
6transform-style: preserve-3d;
7
8/* Add 3D depth with 600px perspective */
9perspective: 600px;

translate3d() 函數在3D空間中執行平移。
- 它可以在三個維度上指定：X軸、Y軸和Z軸。
通過將 transform-style 屬性設為 preserve-3d，以及將 perspective 屬性設為 600px，可為子元素應用具有深度的三維移動效果。

`rotate3d()`

1/* Rotate 45 degrees around the X and Y axes */
2transform: rotate3d(1, 1, 0, 45deg);
3
4transform-style: preserve-3d;
5perspective: 600px;

rotate3d() 函數在3D空間中執行旋轉。
- 它基於X軸、Y軸和Z軸旋轉元素。

結合多種轉換效果

1transform: rotate(45deg) scale(1.5);

transform 屬性可以同時應用多種轉換效果。例如，您可以結合旋轉和縮放效果。

使用重點

transform 屬性是 CSS 中一個強大的工具，用於視覺化地改變元素。通過結合各種功能，您可以創建互動且動態的用戶界面。

transform 屬性允許直接轉換元素，實現視覺效果的改變而不影響 DOM 佈局。
當與 transition 或 animation 結合使用時，它對創建動畫和互動元素非常有用，實現動態設計。

`transform-origin` 屬性

 1.transform-box {
 2    background-color: skyblue;
 3}
 4
 5.transform-origin-left-top:hover {
 6    /* Based on the top left corner */
 7    transform-origin: left top;
 8    transform: rotate(45deg) scale(1.2);
 9}
10
11.transform-origin-right-bottom:hover {
12    /* Based on the right bottom corner */
13    transform-origin: right bottom;
14    transform: rotate(45deg) scale(1.2);
15}
16
17.transform-origin-percent:hover {
18    /* Transform based on the bottom left corner */
19    transform-origin: 0% 100%;
20    transform: rotate(45deg) scale(1.2);
21}
22
23.transform-origin-3d:hover {
24    /* Specify the Z-axis as well */
25    transform-origin: 50% 50% 50px;
26    transform: rotate(45deg) scale(1.2);
27}

transform-origin 屬性用於設置 transform 屬性所應用轉換的原點。您可以指定元素轉換的參考點，從而控制旋轉或縮放等效果的應用位置。

在此範例中，當您將滑鼠懸停在元素上時，它會根據 transform-origin 屬性指定的點同時旋轉和縮放。

基本語法

1transform-origin: x y z;

對於 transform-origin 屬性，您可以像這樣指定 x、y 和 z。

對於 x，指定 X 軸上的參考點（水平方向）。值可以使用關鍵字（left、center、right）或長度單位（px、% 等）來指定。
對於 y，指定 Y 軸上的參考點（垂直方向）。值可以使用關鍵字（top、center、bottom）或長度單位來指定。
對於 z，指定 Z 軸上的參考點（深度方向）。它只能與 3D 轉換一起使用。它是可選的，默認為 0。

默認值

1transform-origin: 50% 50%; /* Center of the element */

transform-origin 屬性的默認值是元素在 X 軸和 Y 軸上的中心點。這意味著，默認情況下，轉換是以元素的中心為參考點進行的。

如何指定值

transform-origin 屬性的值可以使用關鍵字、百分比、長度單位如 px、em 等來指定。

關鍵字規範
- left：將 X 軸的參考點設定為元素的左邊緣。
- right：將 X 軸的參考點設定為元素的右邊緣。
- top：將 Y 軸的參考點設定為元素的頂部邊緣。
- bottom：將 Y 軸的參考點設定為元素的底部邊緣。
- center：將 X 軸或 Y 軸的參考點設定為元素的中心。
百分比規範
- 0%：設定為左側或頂部邊緣。
- 50%：設定為中心。
- 100%：設定為右側或底部邊緣。
長度規範
- 您可以使用像是 px、em 等特定的長度來精確調整參考點。

3D 轉換中的 `transform-origin`

1.box {
2    width: 100px;
3    height: 100px;
4    background-color: lightblue;
5    transform-origin: 50% 50% 50px; /* Specify the Z-axis as well */
6    transform: rotateY(45deg);
7}

transform-origin 也可以用於 3D 轉換。在 3D 轉換中，您還可以指定 Z 軸上的參考點。例如，通過指定深度方向的旋轉中心，可以實現具有深度感的轉換。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。請也查看我們的 YouTube 頻道。

YouTube Video

與透明度相關的CSS屬性動畫相關的CSS屬性

與濾鏡效果相關的CSS屬性

YouTube Video

預覽的HTML

過濾效果

filter屬性

基本語法

濾鏡功能的類型

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

應用多個濾鏡

使用 filter 屬性的優勢

transform 屬性

基本語法

主要的變換函數

translate()

rotate()

scale()

skew()

matrix()

3D 變換函數

translate3d()

rotate3d()

結合多種轉換效果

使用重點

transform-origin 屬性

基本語法

默認值

如何指定值

3D 轉換中的 transform-origin

YouTube Video

`filter`屬性

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

使用 `filter` 屬性的優勢

`transform` 屬性

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

`transform-origin` 屬性

3D 轉換中的 `transform-origin`