คุณสมบัติ CSS ที่เกี่ยวข้องกับเอฟเฟกต์ฟิลเตอร์

Articles

บทความนี้อธิบายคุณสมบัติ 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(50px, 50px, 50px)</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">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            </section>
157        </article>
158    </main>
159</body>
160</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 เมื่อเลื่อนเมาส์ไปที่องค์ประกอบ องค์ประกอบจะหมุน 30 องศาบนแกน X และ 20 องศาบนแกน Y
ในคลาส 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 ระบุ x และ y โดยใช้หน่วยเช่น px หรือ % คุณสามารถระบุแยกกันได้ด้วย 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) จะทำให้ขนาดเพิ่มขึ้นเป็น 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() ระบุเมทริกซ์สำหรับรวมการเปลี่ยนรูปหลายแบบพร้อมกัน โดยปกติแล้วจะใช้ร่วมกับฟังก์ชันการเปลี่ยนรูปอื่น ๆ

ฟังก์ชันการเปลี่ยนรูปแบบ 3 มิติ

`translate3d()`

1/* Moves the element 100px to the right (X-axis),
250px down (Y-axis), and 30px towards the viewer (Z-axis) */
3transform: translate3d(100px, 50px, 30px);
4
5/* Allows child elements to preserve their 3D position relative to the parent */
6transform-style: preserve-3d;
7
8/* Applies a perspective from a distance of 600px to give a sense of depth */
9perspective: 600px;

ฟังก์ชัน translate3d() ทำการย้ายตำแหน่งในพื้นที่ 3 มิติ
- สามารถระบุในสามมิติได้: แกน 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() ทำการหมุนในพื้นที่ 3 มิติ
- ใช้เพื่อหมุนองค์ประกอบตามแกน X, Y และ Z

การรวมการแปลงหลายๆ แบบเข้าด้วยกัน

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

คุณสมบัติ transform สามารถใช้งานการแปลงหลายแบบพร้อมกันได้ ตัวอย่างเช่น คุณสามารถรวมการหมุนและการปรับขนาดเข้าด้วยกัน

จุดสำคัญสำหรับการใช้งาน

คุณสมบัติ transform เป็นเครื่องมือทรงพลังใน CSS สำหรับการเปลี่ยนแปลงลักษณะทางสายตาขององค์ประกอบ ด้วยการรวมฟังก์ชันหลายแบบเข้าด้วยกัน คุณสามารถสร้าง UI ที่มีการโต้ตอบและดูมีชีวิตชีวาได้

คุณสมบัติ 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}

คุณสมบัติ transform-origin ใช้สำหรับกำหนดจุดกำเนิดของการแปลงที่ใช้ผ่านคุณสมบัติ transform คุณสามารถกำหนดจุดอ้างอิงสำหรับการแปลงขององค์ประกอบ เพื่อควบคุมว่าจะใช้เอฟเฟกต์ เช่น การหมุนหรือการปรับขนาด รอบตำแหน่งใด

ในตัวอย่างนี้ เมื่อคุณวางเมาส์เหนือองค์ประกอบ มันจะหมุนและปรับขนาดพร้อมกันตามจุดที่กำหนดโดยคุณสมบัติ transform-origin

ไวยกรณ์พื้นฐาน

1transform-origin: x y z;

สำหรับคุณสมบัติ transform-origin คุณสามารถกำหนดค่า x, y, และ z ได้ดังนี้

สำหรับ x ให้กำหนดจุดอ้างอิงบนแกน X (แกนนอน) ค่าของ x สามารถระบุได้โดยใช้คำสำคัญ (left, center, right) หรือหน่วยความยาว (px, % เป็นต้น)
สำหรับ y ให้กำหนดจุดอ้างอิงบนแกน Y (แกนตั้ง) ค่าของ y สามารถระบุได้โดยใช้คำสำคัญ (top, center, bottom) หรือหน่วยความยาว
สำหรับ z ให้กำหนดจุดอ้างอิงบนแกน Z (ทิศทางความลึก) มันสามารถใช้งานได้เฉพาะกับการแปลง 3 มิติ มันเป็นทางเลือก และค่าปริยายคือ 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, เป็นต้น

`transform-origin` ในการแปลงแบบ 3D

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 ได้เช่นกัน ตัวอย่างเช่น โดยการกำหนดจุดกึ่งกลางของการหมุนในทิศทางความลึก การแปลงที่มีความรู้สึกถึงมิติความลึกจะเป็นไปได้

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับความโปร่งใส

คุณสมบัติ CSS ที่เกี่ยวข้องกับเอฟเฟกต์ฟิลเตอร์

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

ผลกระทบของตัวกรอง

คุณสมบัติ filter

ไวยกรณ์พื้นฐาน

ประเภทของฟังก์ชันฟิลเตอร์

blur()

brightness()

contrast()

grayscale()

hue-rotate()

invert()

opacity()

saturate()

sepia()

การใช้ฟิลเตอร์หลายตัว

ข้อดีของการใช้คุณสมบัติ filter

คุณสมบัติ transform

ไวยกรณ์พื้นฐาน

ฟังก์ชันการเปลี่ยนรูปหลัก

translate()

rotate()

scale()

skew()

matrix()

ฟังก์ชันการเปลี่ยนรูปแบบ 3 มิติ

translate3d()

rotate3d()

การรวมการแปลงหลายๆ แบบเข้าด้วยกัน

จุดสำคัญสำหรับการใช้งาน

คุณสมบัติ transform-origin

ไวยกรณ์พื้นฐาน

ค่าเริ่มต้น

วิธีการกำหนดค่า

transform-origin ในการแปลงแบบ 3D

YouTube Video

คุณสมบัติ `filter`

`blur()`

`brightness()`

`contrast()`

`grayscale()`

`hue-rotate()`

`invert()`

`opacity()`

`saturate()`

`sepia()`

ข้อดีของการใช้คุณสมบัติ `filter`

คุณสมบัติ `transform`

`translate()`

`rotate()`

`scale()`

`skew()`

`matrix()`

`translate3d()`

`rotate3d()`

คุณสมบัติ `transform-origin`

`transform-origin` ในการแปลงแบบ 3D