ফাংশন 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);
}

Результат:

আরও দেখুন