CSS transform এটিয়েট

  • পূর্ববর্তী পৃষ্ঠা টপ
  • পরবর্তী পৃষ্ঠা transform-origin

নির্বাচন ও ব্যবহার

transform অবজ্ঞা উপাদানকে 2D বা 3D পরিবর্তন আরোপ করে। এই অবজ্ঞা আমাদের ৩ডি উপাদানকে ঘুরিয়ে দিতে, সমস্ত আকারে বদলাতে, সরিয়ে দিতে বা বাঁকাতে দিয়ে আমরা পরিবর্তন করতে পারি。

transform অবজ্ঞা বোঝাতে ভালোভাবে, এইটা দেখুন:প্রদর্শন。

আরও দেখুন:

CSS3 শিক্ষা:CSS3 2D রূপান্তর

CSS3 শিক্ষা:CSS3 3D রূপান্তর

HTML DOM পরিচ্ছন্ন হান্ডবুক:transform অবজ্ঞা

উদাহরণ

div উপাদানকে ঘুরিয়ে দিন:

div
{
transform:rotate(7deg);
}

আপনার নিজের পরীক্ষা করুন

পাতার নিচে আরও উদাহরণ আছে。

CSS ব্যবহার শব্দ

transform: none|transform-functions;

প্রতিভূত মান

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

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: না
উত্তরসূরীত্ব: না
সংস্করণ: CSS3
JavaScript সংজ্ঞা: object.style.transform="rotate(7deg)"

আরও উদাহরণ

টেবিলের উপরে ফেলা ছবি
এই উদাহরণে কিভাবে ‘পলোরাইজ’ ছবি তৈরি করা যায় এবং ছবিটি ঘুরিয়ে দেওয়া হয়

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

টেবিলের সংখ্যাগুলি এই বৈশিষ্ট্যটির পূর্ণ সমর্থনকারী প্রথম ব্রাউজার সংস্করণকে নির্দেশ করে

প্রথম সংস্করণের প্রিফিক্স ব্যবহার করে -webkit-、-moz- বা -ms- এর সঙ্গে সংখ্যা

বৈশিষ্ট্য Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-
  • পূর্ববর্তী পৃষ্ঠা টপ
  • পরবর্তী পৃষ্ঠা transform-origin