ट्रांसफॉर्म प्रॉपर्टी

प्रॉपर्टी transform एलिमेंट के ट्रांसफॉर्मेशन सेट करती है, जैसे कि रोटेशन, स्केलिंग, तिरछापन, शिफ्टिंग और अन्य। संबंधित ट्रांसफॉर्मेशन स्पेस से अलग करके लिखे जाते हैं:

cssसेलेक्टर {
  transform: rotate(30deg) scale(3);
}

उदाहरण

इस उदाहरण में ब्लॉक को घड़ी की दिशा में 30 डिग्री से घुमाया गया है:

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

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

Результат:

उदाहरण

इस उदाहरण में रोटेशन के अलावा तिरछापन भी जोड़ा गया है:

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

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

Результат:

उदाहरण

इस उदाहरण में रोटेशन और तिरछापन के अलावा स्केल में बदलाव भी जोड़ा गया है:

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

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

Результат: