CSS 2D ট্রান্সফর্ম

CSS 2D ট্রান্সফর্ম

CSS পরিবর্তন (transforms) ইলাকা সরবরাহ, ঘুরে ফেলা, সমস্তর এবং চিহ্নিত করতে আপনাকে সহায়তা করে:

নিম্নোক্ত ইলাকা উপর মাউস টাইপ করে, 2D পরিবর্তন দেখতে পারেন:

2D rotate

এই চপ্তীতে আপনি নিম্নলিখিত CSS বৈশিষ্ট্যগুলি শিখবেন:

  • transform

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই বৈশিষ্ট্যটির পূর্ণাঙ্গ সমর্থনকারী প্রথম ব্রাউজার সংস্করণটি উল্লেখ করে:

প্রতিভাত্ত্ব চ্রম আইই ফায়ারফক্স স্যাফারি ওপেরা
transform 36.0 10.0 16.0 9.0 23.0

CSS 2D পরিবর্তন পদ্ধতি

CSS ব্যবহার করে transform এই পদ্ধতিগুলির মাধ্যমে 2D পরিবর্তন ব্যবহার করতে পারেন:

  • translate()
  • rotate()
  • scaleX()
  • scaleY()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

সুঝাওয়া:আপনি পরবর্তী চপ্তীতে 3D পরিবর্তন শিখবেন。

translate() পদ্ধতি

Translate

translate() নির্দিষ্ট X এবং Y অক্ষের মান অনুযায়ী ইলাকা তার বর্তমান অবস্থান থেকে সরিয়ে যায়。

নিম্নোক্ত উদাহরণটি <div> ইলাকা 50 পিক্সেল ডানে এবং 100 পিক্সেল নীচে সরিয়ে যায়:

উদাহরণ

div {
  transform: translate(50px, 100px);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

rotate() পদ্ধতি

Rotate

rotate() নির্দিষ্ট কোণ অনুযায়ী ইলাকা পূর্বাভাগে এবং পশ্চিমাভাগে ঘুরে ফেলা যায়。

নিম্নোক্ত উদাহরণটি <div> ইলাকা 20 ডিগ্রি পূর্বাভাগে ঘুরে ফেলে:

উদাহরণ

div {
  transform: rotate(20deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নেতিবাচক মান দিয়ে ইলাকা পশ্চিমাভাগে ঘুরে ফেলা যায়。

নিম্নোক্ত উদাহরণটি <div> ইলাকা 20 ডিগ্রি পশ্চিমাভাগে ঘুরে ফেলে:

উদাহরণ

div {
  transform: rotate(-20deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

scale() পদ্ধতি

Scale

scale() প্রদেয় প্রস্থতির আকার অনুযায়ী ইলাকার আকার বাড়াতে এবং কমাতে পদ্ধতি。

নিম্নোক্ত উদাহরণটি <div> ইলাকা তার প্রকৃত প্রস্থতির দ্বিগুণ প্রস্থতি এবং তিনগুণ প্রস্থতি করে বাড়ায়:

উদাহরণ

div {
  transform: scale(2, 3);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিম্নোক্ত উদাহরণটি <div> ইলাকা তার প্রকৃত প্রস্থতির অর্ধেক করে কমায়:

উদাহরণ

div {
  transform: scale(0.5, 0.5);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

scaleX() পদ্ধতি

scaleX() ইলাকার প্রস্থতি বাড়াতে এবং কমাতে পদ্ধতি。

নিম্নোক্ত উদাহরণটি <div> ইলাকা তার প্রকৃত প্রস্থতির দ্বিগুণ করে বাড়ায়:

উদাহরণ

div {
  transform: scaleX(2);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

নিম্নোক্ত উদাহরণটি <div> ইলাকা তার প্রকৃত প্রস্থতির অর্ধেক করে কমায়:

উদাহরণ

div {
  transform: scaleX(0.5);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

scaleY() 方法

scaleY() 方法增加或减少元素的高度。

下面的例子把

元素增大到其原始高度的三倍：

উদাহরণ

div {
  transform: scaleY(3);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

下面的例子把

元素缩减为其原始高度的一半：

উদাহরণ

div {
  transform: scaleY(0.5);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

skewX() 方法

skewX() 方法使元素沿 X 轴倾斜给定角度。

下例把

元素沿X轴倾斜 20 度：

উদাহরণ

div {
  transform: skewX(20deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

skewY() 方法

skewY() 方法使元素沿 Y 轴倾斜给定角度。

下例把

元素沿 Y 轴倾斜 20 度：

উদাহরণ

div {
  transform: skewY(20deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

skew() 方法

skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。

নিম্নলিখিত উদাহরণটিতে <div> ইউনিটকে X অক্ষের দিকে 20 ডিগ্রি ঢেলে এবং Y অক্ষের দিকে 10 ডিগ্রি ঢেলে দেয়

উদাহরণ

div {
  transform: skew(20deg, 10deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

যদি দ্বিতীয় পরামিতি নির্দিষ্ট না হয়, তবে তার মান শূন্য।তাই, নিম্নলিখিত উদাহরণটিতে <div> ইউনিটকে X অক্ষের দিকে 20 ডিগ্রি ঢেলে দেয়

উদাহরণ

div {
  transform: skew(20deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

matrix() পদ্ধতি

Rotate

matrix() পদ্ধতি সমস্ত 2D পরিবর্তন পদ্ধতিকে একত্রিত করে

matrix() পদ্ধতি ছয়টি পরামিতি গ্রহণ করে, যার মধ্যে গণিতীয় ফাংশনগুলি রয়েছে, যা ইউনিটকে ঘুরিয়ে দেয়, সমস্ত পরিবর্তন (সরানো) করে এবং ইউনিটকে ঢেলতে দেয়

পরামিতি নিম্নরূপ: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

উদাহরণ

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS পরিবর্তন প্রতিভাত্ত্ব

উপরোক্ত সারণীতে সমস্ত 2D পরিবর্তন প্রতিভাত্ত্ব উপস্থাপিত হয়

প্রতিভাত্ত্ব বর্ণনা
transform 2D বা 3D পরিবর্তন ইউনিটের ওপর আপ্লাই করুন
transform-origin পরিবর্তনকৃত ইউনিটের অবস্থান পরিবর্তন করতে আপনাকে অনুমতি দেয়

CSS 2D পরিবর্তন পদ্ধতি

ফাংশন বর্ণনা
matrix(n,n,n,n,n,n) 2D পরিবর্তন নির্বাচন, ছয়টি মানের ম্যাট্রিক্স ব্যবহার করে
translate(x,y) 2D পরিবর্তন নির্বাচন, ইউনিট এক্সএল এবং ইউনিট এক্সএসির দিকে অবস্থান সরানো
translateX(n) 2D পরিবর্তন নির্বাচন, ইউনিট এক্সএসির দিকে অবস্থান সরানো
translateY(n) 2D পরিবর্তন নির্বাচন, ইউনিট এক্সএলের দিকে অবস্থান সরানো
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。