rotateX ශ්‍රිතය

rotateX ශ්‍රිතය ත්‍රිමාණ අවකාශයේ X අක්ෂයට සාපේක්ෂව කැරකැවීමක් අර්ථ දක්වයි. එය transform ගුණය සමඟ එක්ව භාවිතා වේ. ගුණයේ අගය කෝණ ඒකක යම් ඒකකයකින් දක්වන කෝණයකි. ධන අගයක් අප දෙසට කරකවන අතර ඍණ අගයක් අපගෙන් ඉවතට කරකවයි. කැරකැවීම සිදුවන්නේ transform-origin ගුණය මගින් අර්ථ දක්වන ලක්ෂ්‍යය වටා ය.

වාක්‍ය ඛණ්ඩනය

cssතෝරන්නා {
  transform: rotateX(කෝණය);
}

උදාහරණය

මෙම උදාහරණයේ, සෘජුකෝණාස්‍රය මත සුළඟ ගැසූ විට X අක්ෂය වටා අංශක 180 කෝණයකින් කැරකෙනු ඇත. කැරකැවීම සුමට කිරීම සඳහා transition ගුණය එකතු කර ඇත:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

උදාහරණය

transform-origin ගුණය භාවිතා කර කැරකැවීමේ අක්ෂය වෙනස් කරමු:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(180deg);
}

Результат:

උදාහරණය

ඍණ කෝණයක් නියම කරමු:

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

css#elem {
  border: 3px solid black;
  width: 100px;
  height: 50px;
  transition: transform 3s linear;
  transform-origin: center bottom;
}
#elem:hover {
  transform: rotateX(-180deg);
}

Результат:

මේවාත් බලන්න