CSS 3D ট্রান্সফর্ম

CSS 3D ট্রান্সফর্ম

CSS ৩ডি রূপান্তরও সমর্থন করে。

মাউসটি নিচের তত্ত্বকে সমীক্ষা করেন, ২ডি এবং ৩ডি রূপান্তরের মধ্যে পার্থক্য দেখতে পারবেন:

2D rotate
2D rotate

3D rotate

  • transform

এই চ্যাপ্টারে, আপনি নিচের CSS অতিভূতকে শিখতে পারেন:

ব্রাউজার সমর্থন

অতিভূত তালিকায় সংখ্যা বলা হয়েছে যে, কোনও ব্রাউজারটি যে প্রথম এই অতিভূতকে সম্পূর্ণরূপে সমর্থন করে। IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D সমস্তর সময়াবস্থা পদ্ধতি

CSS transform অতিভূত পদ্ধতির মাধ্যমে, আপনি নিচের 3D সমস্তর সময়াবস্থা পদ্ধতি ব্যবহার করতে পারেন:

  • rotateX()
  • rotateY()
  • rotateZ()

rotateX() পদ্ধতি

ভ্রমণ এক্স

rotateX() পদ্ধতি নির্দিষ্ট করুন যাতে উপাদান তার X-অক্ষ দিয়ে দিয়ে একটি ডিগ্রি উভয়মুখীভাবে ঘুরুক হয়:

প্রকল্পনা

#myDiv {
  transform: rotateX(150deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

rotateY() পদ্ধতি

ভ্রমণ ওয়াই

rotateY() পদ্ধতি নির্দিষ্ট করুন যাতে উপাদান তার Y-অক্ষ দিয়ে দিয়ে একটি ডিগ্রি উভয়মুখীভাবে ঘুরুক হয়:

প্রকল্পনা

#myDiv {
  transform: rotateY(130deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

rotateZ() পদ্ধতি

rotateZ() পদ্ধতি নির্দিষ্ট করুন যাতে উপাদান তার Z-অক্ষ দিয়ে দিয়ে দিয়ে একটি ডিগ্রি উভয়মুখীভাবে ঘুরুক হয়:

প্রকল্পনা

#myDiv {
  transform: rotateZ(90deg);
}

স্বয়ংক্রিয়ভাবে প্রয়োগ করুন

CSS সমস্তর সময়াবস্থা পদ্ধতি

সমস্তর সময়াবস্থা পদ্ধতির সমস্ত অতিভূত তালিকা নিচে দেওয়া হলো:

অতিভূত বর্ণনা
transform 2D অথবা 3D সমস্তর সময়াবস্থা প্রয়োগ করুন。
transform-origin সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
transform-style সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
perspective 3D উপাদানের দৃশ্যপট নির্দিষ্ট করুন。
perspective-origin 3D উপাদানের নিচের অবস্থান নির্দিষ্ট করুন。
backface-visibility সমস্তর সময়াবস্থা নির্দিষ্ট করুন。

CSS 3D সমস্তর সময়াবস্থা পদ্ধতি

ফাংশন বর্ণনা
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)		 16টি মানের 4x4 ম্যাট্রিক্স ব্যবহার করে 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
translate3d(x,y,z) 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
translateX(x) 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
translateY(y) 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
translateZ(z) 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
scale3d(x,y,z) 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
scaleX(x) দিয়ে 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
scaleY(y) দিয়ে 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
scaleZ(z) দিয়ে 3D সমস্তর সময়াবস্থা নির্দিষ্ট করুন。
rotate3d(x,y,z,angle) 3D রোটেশন নির্ধারণ করুন。
rotateX(angle) X অক্ষের দিকে 3D রোটেশন নির্ধারণ করুন。
rotateY(angle) Y অক্ষের দিকে 3D রোটেশন নির্ধারণ করুন。
rotateZ(angle) Z অক্ষের দিকে 3D রোটেশন নির্ধারণ করুন。
perspective(n) 3D ট্রান্সফর্ম ইলিমেন্টের পারসপেকটিভ ভিউ নির্ধারণ করুন。