A Post Mortem Report Abbot CSS Transition and Transform !
CSS Transitions:
Transitions শব্দের অর্থ হচ্ছে স্থানান্তর অথবা পরিবর্তন। CSS Transition এর মাধ্যমে এইচটিএমএল এলিমেন্টকে একটা প্রদত্ত সময়ের মধ্যে এক মান থেকে অন্য মানে মসৃণভাবে পরিবর্তন করা হয়।
সিএসএস ট্রানজিশন প্রোপার্টি গুলো নিম্নরূপঃ-
transition - সকল ট্রানজিশন প্রোপার্টি ব্যবহারের জন্য এটি একটি শর্টহ্যান্ড প্রোপার্টি।
transition-delay - এটির মাধ্যমে ট্রানজিশন ইফেক্ট শুরু হতে কত সময় ধরে বিলম্বিত হবে তা নির্ধারণ করা হয়।
transition-duration - এটির মাধ্যমে ট্রানজিশন ইফেক্ট সম্পূর্ণ হতে কত সময় নেবে তা নির্ধারণ করা হয়।
transition-property - এটির মাধ্যমে ট্রানজিশন ইফেক্টের জন্য সিএসএস প্রোপার্টির একটি ভ্যালু বা নাম যুক্ত করা হয়।
transition-timing-function - এটির মাধ্যমে ট্রানজিশন ইফেক্ট ট্রানজিশন হওয়ার গতি নির্ধারণ করা হয়।
ট্রানজিশন ব্যবহারের নিয়মঃ
একটি এলিমেন্টে ট্রানজিশন ইফেক্ট যুক্ত করতে দু'টো বিষয় নির্দিষ্ট করতে হবে।
প্রথমতঃ- যে এলিমেন্টের উপর ট্রানজিশন ইফেক্ট যুক্ত করতে চান, তার জন্য একটি সিএসএস প্রোপার্টি সেট করা।
দ্বিতীয়তঃ- ইফেক্টের একটি নির্দিষ্ট সময় নির্ধারণ করে দেওয়া। যাতে নির্ধারিত সময়কাল পর্যন্ত ইফেক্ট চলতে থাকে। যদি সময় নির্দিষ্ট করা না হয়, তাহলে এলিমেন্টের উপর কোন রকম ট্রানজিশন ইফেক্ট পড়বে না। কারণ সেটির মান ডিফল্ট ভাবে শুণ্য থাকবে।
ট্রানজিশনে বক্ররেখার গতি নির্ধারণঃ
transition-timing-function প্রোপার্টি দ্বারা ট্রানজিশনে বক্ররেখার গতিকে নির্ধারণ করা হয়।
transition-timing-function প্রোপার্টির জন্য নিম্মোক্ত ভ্যালু সমুহ ব্যবহার করা হয়।
ease - এটি ডিফল্ট ভ্যালু। এই ভ্যালুর এনিমেশন ধীরে ধীরে শুরু হয়, অতঃপর দ্রুত চলে এবং ধীরে ধীরে শেষ হয়।
linear - এই ভ্যালুর এনিমেশন একই গতিতে শুরু হয় এবং শেষ হয়।
ease-in - এই ভ্যালুর এনিমেশন ধীর গতিতে শুরু হয়।
ease-out - এই ভ্যালুর এনিমেশন ধীর গতিতে শেষ হয়।
ease-in-out - এই ভ্যালুর এনিমেশন ধীর গতিতে শুরু হয় এবং শেষ হয়।
cubic-bezier(n,n,n,n) - cubic-bezier ফাংশনে আপনি আপনার ইচ্ছেমত যে কোন ভ্যালু ব্যবহার করতে পারেন।
ট্রানজিশন ইফেক্ট বিলম্বিত করাঃ
transition-delay প্রোপার্টি দ্বারা নির্দিষ্ট করা হয় যে, ট্রানজিশন ইফেক্ট কত সময় পরে শুরু হবে।
আরো বিস্তারিত জানতে এখানে গিয়ে পড়ুন@ https://www.w3schools.com/css/css3_transitions.asp
==================================
Css Transform:
Transform শব্দের অর্থ হচ্ছে রুপান্তর। CSS 2D Transform এর মাধ্যমে এইচটিএমএল এলিমেন্টের অবস্থান পরিবর্তন করা যায়।
CSS Transform এর বিভিন্ন মেথড রয়েছে, যেমনঃ- translate() scale() rotate() skew() ইত্যাদী ব্যবহার করে একটি এলিমেন্টের উপর ভিন্ন ভিন্ন ইফেক্ট দিতে পারেন।
সিএসএস ট্রান্সফর্ম প্রোপার্টি গুলো নিম্নরূপঃ-
transform - এটির মাধ্যমে একটি এলিমেন্টের উপর 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করা হয়।
transform-origin - এটির মাধ্যমে একটি ট্রান্সফর্মেশন এলিমেন্টের অবস্থান পরিবর্তন করা হয়।
তবে এই প্রোপার্টি গুলো ব্যবহারের জন্য সিএসএসে বেশ কিছু 2D TRANSFORMS METHODS রয়েছে। যেমনঃ-
translate() - ইহা দ্বারা 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের অবস্থান পরিবর্তন করা হয়।
rotate() - ইহা দ্বারা 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টকে ঘড়ির কাটার মত ঘুরানো হয়।
scale() - ইহা দ্বারা 2D ট্রান্সফর্মেশনের মাধ্যমে একটি এলিমেন্টের আকৃতি ইটালিক বা তির্যকভাবে পরিবর্তন করা হয়।
matrix() - সকল 2D ট্রান্সফর্মেশন মেথড একত্রে ব্যবহার করার জন্য এটি একটি সংক্ষিপ্ত মেথড।
CSS translate() Method
translate() মেথড একটি এলিমেন্টের বর্তমান অবস্থান পরিবর্তন করতে পারে। অর্থাৎ এলিমেন্টকে বর্তমান অবস্থান থেকে সরিয়ে নিতে পারে। এখানে transform:translate(50px,50px); দুটো প্যারামিটার ব্যবহার করতে পারি। প্রথম (50px) হচ্ছে, X এক্সেস অর্থাৎ বাঁ থেকে ডান দিকে। এবং দ্বিতীয় (50px) হচ্ছে, Y এক্সেস অর্থাৎ উপর থেকে নিচের দিকে।
CSS rotate() Method
rotate() মেথড একটি এলিমেন্টকে 2D Transformation এর মাধ্যমে নির্ধারিত ডিগ্রী অনুযায়ী ঘড়ির কাঁটার মত চারিদিকে ঘুরাতে পারে।
rotate() Method After Hover
কোন এলিমেন্টের উপর মাউস পয়েন্ট নিয়ে গেলে বা হোভার করলে সেটি কিভাবে ঘুরবে সেটি করা যায় ।
CSS scale() Method
আমরা যারা ফটোশপ নিয়ে কম বেশি কাজ করেছি সবাই জানি, কোন একটি এলিমেন্টকে বড় বা ছোট করার জন্য এলিমেন্টিকে প্রথমে CTRL + T চেপে সেলেক্ট করে তারপর এলিমেন্টের যে কোন একটি কর্ণার অথবা যে কোন একটি সাইড ধরে এলিমেন্টিকে বড় অথবা ছোট করে থাকি। সেই সেটা টেক্সট হোক বা ইমেজ অথবা অন্য কোন এলিমেন্ট।
ফটোশপ নিয়ে করা সেই কাজ গুলো এখানে সিএসএস কোডের মাধ্যমে করা যায়। ফটোশপে যেমন হরিজান্টালি এবং ভার্টিক্যালি উভয় দিক থেকে বড় ছোট করা যায় ঠিক তেমনি সিএসএস দিয়েও একই কাজ করা যাবে। তার জন্য সিএসএসে দুইটি প্যারামিটার ব্যবহার করতে হয়। X প্যারামিটার, যা হরিজান্টালি বা পাশাপাশি এলিমেন্টকে বড় অথবা ছোট করে। Y প্যারামিটার, যা ভার্টিক্যালি বা উপরে নিচে এলিমেন্টকে বড় অথবা ছোট করে।
CSS scaleX() Method
scaleX() মেথড, যা হরিজান্টালি বা পাশাপাশি এলিমেন্টকে বড় অথবা ছোট করে।
CSS scaleY() Method
scaleY() মেথড, যা ভার্টিক্যালি বা উপরে নিচে এলিমেন্টকে বড় অথবা ছোট করে।
CSS skew() Method
skew() মেথডে প্রদত্ত কোণদ্বয় অনুযায়ী X এক্সেস এবং Y এক্সেস দুই দিক থেকে ইটালিক ভাবে পরিবর্তন করা হয়।
skew() Method With Single Value
skew() মেথডে দুটো প্যারামিটার ব্যবহার করা হয়। কোন কারণে দ্বিতীয় ভ্যালু দেওয়া না হলে সেটির ভ্যালু ডিফল্টভাবে শূন্য হয়।
CSS matrix() Method
matrix() মেথড এর মাধ্যমে 2D ট্রান্সফর্মে ব্যবহৃত সবগুলো মেথড একত্রে ব্যবহার করা যাবে। matrix() মেথডে গাণিতিক ফাংশনযুক্ত মোট ছয়টি প্যারামিটার ব্যবহার করা যাবে। যা একটি এলিমেন্টকে rotate, scale, translate এবং skew করে।
ম্যাট্রিক্স এর গঠন
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
Transform প্রোপার্টির ভ্যালু-সমূহঃ
none- এখানে কোনো ট্রান্সফর্মেশন করবে না।
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) - ১৬ টি ভ্যালু একটি ৪x৪ ম্যাট্রিক্স ব্যবহার করে একটি 3D ট্রান্সফর্মেশন নির্ধারণ করা হয়েছে।
translate(x,y)-একটি 2D অনুবাদ নির্ধারণ করে।
translate3d(x,y,z) - একটি 3D অনুবাদ নির্ধারণ করে।
translateX(x)- শুধুমাত্র X-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
translateY(y)- শুধুমাত্র Y-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
translateZ(z) - শুধুমাত্র Z-অক্ষের ভ্যালু ব্যাবহার করে একটি অনুবাদ নির্ধারণ করে।
scale(x,y)- একটি 2D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
scale3d(x,y,z) -একটি 3D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
scaleX(x)- X-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
scaleY(y)- Y-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
scaleZ(z) -Z-অক্ষের জন্য দেওয়া প্রদত্ত ভ্যালু দ্বারা একটি 3D স্কেল ট্রান্সফর্মেশন নির্ধারণ করে।
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 ট্রান্সফর্মেশন এলিমেন্টের জন্য একটি পরিপ্রেক্ষিত প্রদর্শন নির্ধারণ করে।
initial - সিএসএস প্রোপার্টির ডিফল্ট ভ্যালু সেট করে। আরও জানতে initial অধ্যায় ভিজিট করুন।
inherit - এই প্রোপার্টির ভ্যালু প্যারেন্ট এলিমেন্ট থেকে উত্তরাধিকার সূত্রে পায়।
3D ট্রান্সফর্ম (CSS 3D Transforms):
Transform শব্দের অর্থ হচ্ছে রুপান্তর। CSS 3D Transform এর মাধ্যমে এইচটিএমএল এলিমেন্টকে ত্রিমাত্রিক ভাবে পরিবর্তন করা হয়। সিএসএস 3D ট্রান্সফর্ম প্রোপার্টি গুলো নিম্নরূপঃ-
transform - এটির মাধ্যমে একটি এলিমেন্টের উপর 2D অথবা 3D ট্রান্সফর্মেশন প্রয়োগ করা হয়।
transform-origin - এটির মাধ্যমে একটি ট্রান্সফর্মেশন এলিমেন্টের অবস্থান পরিবর্তন করা হয়।
transform-style - এটির মাধ্যমে একটি এলিমেন্ট 2D নাকি 3D ট্রান্সফর্মেশন হবে তা নির্ধারণ করা হয়।
perspective - এটির মাধ্যমে একটি ট্রান্সফর্ম এলিমেন্টের perspective view নির্ধারণ করে।
perspective-origin - এটির মাধ্যমে একজন ভিউয়ার 3D এলিমেন্টের যে দিকটা দেখবে তার ঠিক পেছনের অংশের অবস্থান নির্ধারণ করা হয়।
backface-visibility - এটির মাধ্যমে 3D এলিমেন্টের পিছনের অংশ দৃশ্যমান হবে কিনা তা নির্ধারণ করে।
Different 3D Transforms Methods
নিম্নলিখিত কয়েক প্রকারের 3D ট্রান্সফর্ম করতে পারেন। যেমনঃ-
rotateX() মেথড দ্বারা একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X অক্ষের চারপাশে ঘুরাবে।
rotateY() মেথড দ্বারা একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y অক্ষের চারপাশে ঘুরাবে।
rotateZ() মেথড দ্বারা একটি এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z অক্ষের চারপাশে ঘুরাবে।
আরো বিস্তারিত জানতে নিচের লিংক গুলোতে গিয়ে পড়ুন@https://www.w3schools.com/cssref/css3prtransform.asp
https://developer.mozilla.org/.../Web/CSS/CSS_Transforms
https://css-tricks.com/almanac/properties/t/transform/
https://engineerbabu.com/.../css-transitions-and-animations/
আর্টিকেল পড়ে না বুঝলে ইউটিউবে গিয়ে বাংলায় ভিডিও দেখুন আইডিয়া ক্লিয়ার হবে এবং বুঝে যাবেন !
হ্যাপি কোডিং ☺️