फ़ंक्शन 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;
}

Результат:

यह भी देखें