ফাংশন skew

ফাংশন skew একটি এলিমেন্টের বিকৃতি নির্ধারণ করে, এভাবে এটিকে একটি আয়তক্ষেত্র থেকে একটি সামান্তরিকে পরিণত করে। এটি transform বৈশিষ্ট্যের সাথে একত্রে ব্যবহার করা হয়। বৈশিষ্ট্যের মান হল যেকোন কোণের এককে একটি কোণ। বিকৃতি সম্পাদিত হয় সেই বিন্দুটিকে কেন্দ্র করে, যা transform-origin বৈশিষ্ট্য দ্বারা নির্ধারিত হয়।

এটি একটি বা দুটি প্যারামিটার নিতে পারে, যা কমা দ্বারা বিভক্ত। যদি দুটি প্যারামিটার থাকে - প্রথমটি অনুভূমিক বিকৃতি নির্ধারণ করে, এবং দ্বিতীয়টি - উল্লম্ব বিকৃতি নির্ধারণ করে। যদি একটি প্যারামিটার থাকে - তবে এটি অনুভূমিক বিকৃতি নির্ধারণ করে (উভয় দিকে নয়)। প্যারামিটারগুলি ধনাত্মক বা ঋণাত্মক উভয়ই হতে পারে।

সিনট্যাক্স

cssসিলেক্টর {
  transform: skew(এক বা দুটি কোণ);
}

উদাহরণ

এই উদাহরণে ব্লকটি বাম দিকে 30 ডিগ্রি বিকৃত হয়েছে:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

উদাহরণ

এই উদাহরণে ব্লকটি ডান দিকে 30 ডিগ্রি বিকৃত হয়েছে:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(-30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

উদাহরণ

এই উদাহরণে ব্লকটি উল্লম্বভাবে 30 ডিগ্রি বিকৃত হয়েছে (ধনাত্মক মান):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

উদাহরণ

এই উদাহরণে ব্লকটি উল্লম্বভাবে 30 ডিগ্রি বিকৃত হয়েছে (ঋণাত্মক মান):

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(0deg, -30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

উদাহরণ

একই সাথে X এবং Y অক্ষ বরাবর বিকৃতি নির্ধারণ করা হচ্ছে:

html<div id="elem">lorem ipsum</div>

css#elem {
  transform: skew(30deg, 30deg);
  border: 1px solid black;
  width: 100px;
  height: 50px;
}

Результат:

আরও দেখুন