transform ගුණය

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;
}

Результат: