ফিল্টার প্রভাব সম্পর্কিত 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(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 উপাদান তৈরি করতে সহায়তা করে।

ট্রান্সফর্ম-স্কেল ক্লাসে, উপাদানের উপর হোভার করলে এর প্রস্থ ১.৫ গুণ এবং উচ্চতা ২ গুণ বৃদ্ধি পায়।
ট্রান্সফর্ম-স্কিউ ক্লাসে, উপাদানের উপর হোভার করলে এটি X-এক্সিসে ৩০ ডিগ্রি এবং Y-এক্সিসে ২০ ডিগ্রি ঘোরে।
ট্রান্সফর্ম-রোটেট ক্লাসে, উপাদানের উপর হোভার করলে এটি ৪৫ ডিগ্রি ঘোরে এবং ১.৫ গুণ বৃদ্ধি পায়।

মূল সিনট্যাক্স

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

ট্রান্সফর্ম প্রপার্টি হয় none বা একটি ট্রান্সফর্ম-ফাংশন নির্দেশ করে।

যদি none নির্ধারণ করা হয়, কোনো ট্রান্সফর্মেশন প্রয়োগ করা হবে না।
<ট্রান্সফর্ম-ফাংশন> এর মাধ্যমে ট্রান্সফর্মেশনের ধরন নির্ধারণ করুন। স্পেস ব্যবহার করে একাধিক ট্রান্সফর্মেশন প্রয়োগ করা যেতে পারে।

প্রধান ট্রান্সফর্মেশন ফাংশনসমূহ

`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 */

ট্রান্সলেট(x, y) ফাংশন একটি উপাদানকে নির্ধারিত দূরত্ব X এবং Y অ্যাক্সিস বরাবর সরায়। x এবং y এর মান px অথবা % এর মতো ইউনিট ব্যবহার করে নির্ধারণ করুন। আপনি translateX() অথবা translateY() ব্যবহার করেও আলাদাভাবে নির্ধারণ করতে পারেন।

`rotate()`

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

রোটেট(অ্যাঙ্গেল) ফাংশন একটি উপাদানকে নির্ধারিত ডিগ্রি (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 */

স্কেল(x, y) ফাংশন একটি উপাদানকে X এবং Y অ্যাক্সিস বরাবর স্কেল করে। x এবং y হল আসল আকারের সাথে তুলনীয় স্কেল ফ্যাক্টর। উদাহরণস্বরূপ, স্কেল(২, ২) আকারকে দ্বিগুণ করবে। আপনি 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);

স্কিউ(x-অ্যাঙ্গেল, y-অ্যাঙ্গেল) ফাংশন একটি উপাদানকে নির্ধারিত কোণে X এবং Y অ্যাক্সিস বরাবর বক্র করে। আপনি skewX() অথবা skewY() ব্যবহার করেও আলাদাভাবে নির্ধারণ করতে পারেন।

`matrix()`

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

ম্যাট্রিক্স() ফাংশন একসঙ্গে একাধিক ট্রান্সফর্মেশন একত্রিত করতে একটি ম্যাট্রিক্স নির্ধারণ করে। সাধারণত এটি অন্যান্য ট্রান্সফর্মেশন ফাংশনের সঙ্গে মিলিয়ে ব্যবহৃত হয়।

৩ডি (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;

ট্রান্সলেট৩ডি() ফাংশন ৩ডি স্পেসে একটি উপাদানের অবস্থান পরিবর্তন করে।
- এটি তিনটি মাত্রায় নির্ধারণ করা যেতে পারে: 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;

রোটেট৩ডি() ফাংশন ৩ডি স্পেসে একটি উপাদানের ঘূর্ণন প্রয়োগ করে।
- এটি 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}
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: এক্স-অক্ষের রেফারেন্সকে উপাদানের বাম প্রান্তে সেট করে।
- right: এক্স-অক্ষের রেফারেন্সকে উপাদানের ডান প্রান্তে সেট করে।
- top: ওয়াই-অক্ষের রেফারেন্সকে উপাদানের উপরের প্রান্তে সেট করে।
- bottom: ওয়াই-অক্ষের রেফারেন্সকে উপাদানের নিচের প্রান্তে সেট করে।
- center: এক্স বা ওয়াই অক্ষের রেফারেন্সকে উপাদানের কেন্দ্রে সেট করে।
শতাংশ নির্ধারণ
- 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 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`