এই নিবন্ধে আমরা ট্রান্সফর্ম ইন বুঝতে হবে বিশদভাবে এবং একটি বাস্তব ব্যবহারিক বিক্ষোভের সাথে এটি অনুসরণ করুন। নিম্নলিখিত পয়েন্টারগুলি এই নিবন্ধে কভার করা হবে,
ওয়েবসাইটের ক্রিয়াকলাপগুলিতে অগ্রগতির সাথে, আপনার ওয়েবসাইটটিকে আবেদনময়ী এবং আরও উন্নত করতে চতুর সংহতকরণ প্রদান করা সমান গুরুত্বপূর্ণ। আপনার সাইটের প্রশংসা করে এমন বিভিন্ন সিএসএস উপাদান যুক্ত করা সময়ের প্রয়োজন।
লোকেরা ওয়েবসাইটগুলি বন্ধ রাখে যা জনসাধারণের কাছে সত্যই আবেদন করে না। সুতরাং, কীভাবে কিছু উপাদানকে রুপান্তর করার চেষ্টা করা এবং আপনার সিএসএসকে কম সংক্ষেপণের মান দিয়ে সুশোভিত করা যায়।
অনুরূপ প্রয়োজনীয়তাগুলি পূরণ করতে, আমাদের সিএসএস সম্পত্তি রূপান্তর হয়েছে যা উপাদানগুলি স্কিউং, ঘোরানো, স্কেলিং বা অনুবাদ করে রূপান্তর করে।
সি ++ এ ফিবোনাচি ক্রম
সিএসএসে ট্রান্সফর্ম এই নিবন্ধটি নিয়ে চলছে
সিএসএস রূপান্তর কী?
সিএসএস উপাদান রূপান্তরিত করার অর্থ এটি 2D বা 3 ডি ফর্মের মধ্যে একটি প্রান্ত সরবরাহ করা। এটি দৃশ্যত কোনও উপাদানটির স্টাইলিংকে পরিবর্তন করে।
এক্স ও ওয়াই অক্ষের উপর 2D রূপান্তর কাজ করে। আপনি পরিবর্তন করতে উভয় অক্ষের উপর কোনও প্রান্ত বা কাঠামো সরবরাহ করতে পারেন। 3 ডি রূপান্তর করার জন্য, এটি প্রয়োজনীয় গভীরতা প্রদানের জন্য এক্স, ওয়াইয়ের পাশাপাশি জেড অক্ষগুলিতেও কাজ করা উচিত।
সিএসএস 2D রূপান্তর বৈশিষ্ট্য:
| ফাংশন | বর্ণনা |
ম্যাট্রিক্স ( এন, এন, এন, এন, এন, এন ) | ছয়টি মানের ম্যাট্রিক্স |
অনুবাদ করা( x, y ) | X- এবং Y- অক্ষের সাথে উপাদানটি সরানোর অনুমতি দেয় |
অনুবাদ অনুবাদ ( এন ) | এক্স-অক্ষের সাথে উপাদানটি সরানোর অনুমতি দেয় |
অনুবাদ এন ) | এলিমেন্টটিকে Y- অক্ষ বরাবর সরানোর অনুমতি দেয় |
স্কেল( x, y ) | উপাদানগুলির প্রস্থ এবং উচ্চতা পরিবর্তন করে |
স্কেলএক্স ( এন ) | উপাদানটির প্রস্থ পরিবর্তন করে |
স্কেলওয়াই ( এন ) | উপাদানগুলির উচ্চতা পরিবর্তন করে |
ঘুরান( কোণ ) | প্যারামিটারে বর্ণিত একটি কোণে উপাদানটি ঘোরানোর অনুমতি দেয় |
স্কিউ x- কোণ, y- কোণ ) | X- এবং Y- অক্ষ বরাবর উপাদানটি অনুসন্ধান করে |
skewX ( কোণ ) | এক্স-অক্ষ বরাবর উপাদান Skews |
স্কিউওয়াই ( কোণ ) | Y- অক্ষ বরাবর উপাদানটি আবিষ্কার করে |
সিএসএস 3 ডি রূপান্তর বৈশিষ্ট্য:
সম্পত্তি | বর্ণনা |
রূপান্তর | একটি উপাদান একটি 2D বা 3D রূপান্তর প্রয়োগ করে |
রূপান্তর-উত্স | রুপান্তরিত উপাদানগুলিতে অবস্থান পরিবর্তন করার অনুমতি দেয় |
রূপান্তর-শৈলী | নেস্টেড উপাদানগুলি 3 ডি স্পেসে কীভাবে রেন্ডার করা হয় তা নির্দিষ্ট করে |
দৃষ্টিভঙ্গি | 3 ডি এলিমেন্টগুলি কীভাবে দেখা হয় তার দৃষ্টিভঙ্গি নির্দিষ্ট করে |
দৃষ্টিকোণ-উত্স | 3D উপাদানগুলির নীচের অবস্থানটি নির্দিষ্ট করে |
ব্যাকফেস-দৃশ্যমানতা | পর্দার মুখোমুখি না হওয়ার সময় কোনও উপাদান দৃশ্যমান হওয়া উচিত কিনা তা নির্ধারণ করে |
উদাহরণ স্বরূপ:
CSS .element lement প্রস্থ: 20px উচ্চতা: 20px রূপান্তর: স্কেল (20)
এখন, আপনি যখন এটি করেন, সংজ্ঞায়িত উপাদানটি 20 বার দ্বারা মাপানো হবে।
কেবল এটিই নয়, আপনি অনুভূমিক স্কেলিং এবং উল্লম্ব স্কেলিংয়ের জন্য অক্ষ অনুসারে স্কেলও করতে পারেন।
রূপান্তর: স্কেলএক্স (2) রূপান্তর: স্কেলওয়াই (.5)
আপনি পারেন এমন সমস্ত ব্রাউজারগুলিতে একটি উপযুক্ত রূপান্তর সরবরাহ করতে:
div we-ওয়েবেকিট-ট্রান্সফর্ম: স্কেল (1.5) -মোজ-ট্রান্সফর্ম: স্কেল (1.5) -ও-ট্রান্সফর্ম: স্কেল (1.5) ট্রান্সফর্ম: স্কেল (1.5)}
রূপান্তর সিএসএস বৈশিষ্ট্য সিএসএস ভিজ্যুয়াল ফর্ম্যাটিং স্তরের স্থানাঙ্ক স্থানকে উন্নত করে।
ভিজ্যুয়াল ফরম্যাটিং স্তর কী?
ভিজ্যুয়াল ফর্ম্যাটিং স্তরটির অর্থ একটি নথি প্রক্রিয়া করা এবং মিডিয়া প্ল্যাটফর্মগুলিতে দৃশ্যত উপস্থাপন করা। ভিজ্যুয়াল ফর্ম্যাটিংয়ের সাথে আপনি প্রতিটি উপাদানকে এমন একটি মডেল হিসাবে রূপান্তর করতে পারেন যা সিএসএস বক্স মডেলের সাথে একমত হয়। সিএসএস বক্স মডেল একটি আয়তক্ষেত্রাকার বাক্স বিন্যাসে একটি উপাদানকে আকার, অবস্থান এবং বৈশিষ্ট্যগুলি সংজ্ঞায়িত করে ines
বিঃদ্রঃ: কেবল রূপান্তরযোগ্য উপাদানগুলিই রূপান্তরিত হতে পারে।
সিএসএসে ট্রান্সফর্ম এই নিবন্ধটি নিয়ে চলছে
বিভিন্ন রূপান্তর বৈশিষ্ট্য কি?
আসুন সমস্ত রূপান্তরকারী বৈশিষ্ট্যগুলি দেখুন:
1. স্কেল (): স্কেলিং এর অর্থ হল অনুভূমিকভাবে বা উল্লম্বভাবে উপাদানটির আকার পরিবর্তন করা।
উল্লম্ব স্কেলিংয়ের জন্য:স্কেলএক্স
অনুভূমিক স্কেলিংয়ের জন্য:স্কেলওয়াই
একটি উপাদানের জন্য, আপনি হরফ আকার, প্যাডিং, উচ্চতা বা প্রস্থ পরিবর্তন করতে পারেন। ডিফল্ট মান হ'ল 1 যার অর্থ 2 টি দ্বিগুণ স্কেলিং প্রদানের সময় মানটি অর্ধ হিসাবে অর্ধেক প্রদান করা।
2. স্কিউ (): স্কেউ সম্পত্তি একটি ব্যবহারকারীকে একটি স্থানাঙ্ক পয়েন্ট থেকে ডান বা বামে একটি উপাদানকে কাত করতে দেয়। এটি প্রায়শই একটি আয়তক্ষেত্রকে সমান্তরালগ্নে পরিণত করার মতো। আপনি একটি উপাদান এর স্থানাঙ্ক দ্বারা স্কিউ করতে পারেন।
উদাহরণ:
.element {রূপান্তর: skewX (25deg)} .element {রূপান্তর: skewY (25deg)আপনি যখন এটি করেন, উপাদানটি skewX বা skewY ব্যবহার করে অনুভূমিকভাবে এবং উল্লম্বভাবে 25 ডিগ্রি স্কিউ করে।
3. ঘোরান ( ) : আপনি এই সম্পত্তিটি ব্যবহার করে একটি উপাদানকে ঘড়ির কাঁটার দিকে ঘোরান। আপনি এটির মূল জায়গায় ফিরে আসতে 180 ডিগ্রি বা 360 ডিগ্রি ঘোরান rot
.element {রূপান্তর: ঘোরান (25 ডিগ্রি)}খুব ঘোরানোর জন্য, আপনি তিনটি মাত্রার যেকোনটি ব্যবহার করতে পারেন: রোটেটএক্স, রোটেটওয়াই বা রোটেটজেড।
4. অনুবাদ ( ) : আপনি কোনও উপাদানটিকে ঠিক উপরের দিকে বা পাশের দিকে যেতে পারেন।
.element {রূপান্তর: অনুবাদ (20px, 10px)}অনুবাদ কোনও অবজেক্ট / উপাদানগুলিকে উল্টোদিকে বা পাশের দিকে সরিয়ে নিয়ে যাবে। প্রথম নির্দিষ্ট মানটি বস্তুর ডান ওয়ার্ডগুলিকে সরিয়ে দেয় (নেতিবাচক এটি বাম দিকে সরিয়ে দেবে) এবং দ্বিতীয় মান এটি নীচে নিয়ে যায় (aণাত্মক মান নির্দিষ্ট করে এটিকে উপরের দিকে সরানো হবে)।
যদি এটি আপনাকে বিভ্রান্ত করতে পারে, তবে অনুভূমিকভাবে উপাদানটির অবস্থানটি অনুভূমিকভাবে পরিবর্তন করতে এক্স অক্ষ এবং ওয়াই অক্ষগুলি প্রয়োগ করুন position রূপান্তর সম্পত্তি সম্পর্কে সবচেয়ে আশ্চর্যজনক দিকটি হ'ল, রূপান্তর প্রয়োগ করা কেবলমাত্র অন্যান্য উপাদান বা পাঠ্য অক্ষত রেখে উপাদানটিকে নড়াচড়া করতে দেয়। দূরত্বটি সাধারণত পিক্সেল বা শতাংশে নেওয়া হয়।
উদাহরণ স্বরূপ:
.element {ট্রান্সফর্ম: ট্রান্সলেটএক্স (মান) ট্রান্সফর্ম: ট্রান্সলেটওয়্যার (মান)}৫. দৃষ্টিভঙ্গি (): আপনি কোনও উপাদানের দৃষ্টিকোণে গভীরতা সরবরাহ করতে পারেন। এটি রূপান্তরকে ঘনকীয় করে কোনও উপাদানকে 3 ডি রূপান্তর করতে দেয় formation
অনুবাদ 3 ডি (এক্স, ওয়াই, জেড)
অনুবাদ জেড (জেড)
অনুবাদ 3 ডি (x, y, z) অনুবাদ জেড (জেড)
Z অক্ষের ভূমিকা উপাদানটিকে একটি 3D ভিজ্যুয়ালাইজেশন দেয়। ট্রান্সলেটজেড () উপাদানটিকে দর্শকের দিকে নিয়ে যায় যখন একটি নেতিবাচক মান এটিকে সরিয়ে দেয়।
Mat. ম্যাট্রিক্স () : সমস্ত রূপান্তর একত্রিত করুন।
ঘোরান (45 ডিগ্রি) অনুবাদ (24px, 25px)
ম্যাট্রিক্স প্রয়োগ করে () সমস্ত ট্রান্সফর্ম বৈশিষ্ট্যকে এক অ্যারে সংযুক্ত করে।
জাভা উদাহরণ এলোমেলো ক্লাস
রূপান্তর বৈশিষ্ট্য প্রয়োগ করা আপনার উপাদান এবং তাই আপনার ওয়েবসাইটের আবেদনকে বাড়িয়ে তোলে। তাদের চেষ্টা করে দেখুন!
এটি CSS এ ট্রান্সফর্মের উপর আমাদের নিবন্ধের শেষে নিয়ে আসে।
আপনি যদি ওয়েব-বিকাশ সম্পর্কে আরও শিখতে আগ্রহী হন তবে এটি দেখুন লিখেছেন এডুরেকা। ওয়েব ডেভেলপমেন্ট শংসাপত্র প্রশিক্ষণ আপনাকে এইচটিএমএল 5, সিএসএস 3, টুইটার বুটস্ট্র্যাপ 3, জ্যাকুয়ারি এবং গুগল এপিআই ব্যবহার করে কীভাবে চিত্তাকর্ষক ওয়েবসাইট তৈরি করতে শিখতে এবং এটি অ্যামাজন সিম্পল স্টোরেজ সার্ভিসে (এস 3) স্থাপন করতে সহায়তা করবে।
আপনি যদি এখনও আগ্রহী হন আপনার যদি কোনও প্রশ্ন থাকে তবে আপনি এটি 'সিএসএস কী' ব্লগের মন্তব্য বিভাগে পোস্ট করতে পারেন এবং আমরা যত তাড়াতাড়ি সম্ভব আপনার কাছে ফিরে আসব।