রূপান্তরিত করে

গ্রিড লেআউট পরিপাটি, এবং পরিপাটি বিরক্তিকর হতে পারে। একটি চিত্র যা তার কলামের বাইরে ঝুঁকে পড়ে, বা একটি কার্ড যা কার্সারের নীচে সামান্য বৃদ্ধি পায়: এই ধরনের ছোট রূপান্তরগুলি একটি স্ট্যাক করা পৃষ্ঠা থেকে একটি ডিজাইন করা পৃষ্ঠাকে আলাদা করে। দ্য রূপান্তরিত করে মধ্যে এক্সটেনশন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন প্রতিটি উপাদানে সম্পূর্ণ CSS ট্রান্সফর্ম টুলকিট রাখে: অনুবাদ, ঘোরান, স্কেল, তির্যক এবং ফ্লিপ, স্বাভাবিক এবং হোভার অবস্থার জন্য আলাদা সেটিংস সহ।

ট্রান্সফর্ম এক্সটেনশন কি করে #

একবার সক্রিয় হয়ে গেলে, প্রতিটি এলিমেন্টর উপাদান একটি পায় রূপান্তরিত করে এর অধীনে ধারা উন্নত ট্যাব। উল্টানো সক্রিয় রূপান্তর হ্যাঁ এবং ছয়টি নিয়ন্ত্রণ উপস্থিত হয়, প্রতিটি প্রকৃত লেআউট প্রবাহকে স্পর্শ না করেই উপাদানটিতে একটি CSS রূপান্তর প্রয়োগ করে:

• অনুবাদ: উপাদানটিকে X এবং Y অক্ষ বরাবর সরান, তার নিজস্ব আকারের শতাংশে।
• ঘোরানো: যেকোনো কোণে ঘোরান।
• স্কেল: প্রতিটি অক্ষে স্বাধীনভাবে এটিকে বড় করুন বা সঙ্কুচিত করুন।
• তির্যক: একটি তির্যক, গতিশীল চেহারা জন্য এটি তির্যক।
• ফ্লিপ অনুভূমিক /উল্টা উল্লম্ব: এক ক্লিকে মিরর করুন।

দ্য স্বাভাবিক এবং ঘোরাঘুরি করা ট্যাবগুলি পৃথক মান ধারণ করে, তাই একটি উপাদান বিশ্রামে একভাবে বসতে পারে এবং কার্সারটি এটিতে অবতরণ করলে রূপান্তর করতে পারে, আপনার নিয়ন্ত্রণে একটি ট্রানজিশন সময়কাল সহ।

আপনি শুরু করার আগে #

• ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
• এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়। প্লাগইনে নতুন? অনুসরণ কর ইনস্টলেশন গাইড প্রথম।
• ট্রান্সফর্মস একটি বিনামূল্যের এক্সটেনশন, তাই কোনো প্রো লাইসেন্সের প্রয়োজন নেই।

ট্রান্সফর্ম এক্সটেনশন কীভাবে সক্ষম করবেন #

আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ড থেকে, যান মাস্টার অ্যাডনস এবং খুলুন এক্সটেনশন ট্যাব। রূপান্তর বসে অ্যানিমেশন উইজেট একটি হট ব্যাজ সঙ্গে গ্রুপ, মধ্যে প্রবেশ অ্যানিমেশন এবং প্রকাশ করুন। এর টগল ক্লিক করুন যাতে এটি বেগুনি হয়ে যায়, তারপর আঘাত করুন পরিবর্তন সংরক্ষণ করুন এবং সবুজ “Settings সফলভাবে সংরক্ষিত" নোটিশের জন্য অপেক্ষা করুন।

একটি উপাদানে ট্রান্সফর্ম প্যানেল খুলুন #

এলিমেন্টর এডিটরে এলিমেন্ট নির্বাচন করুন, ডেমোতে একটি ইমেজ উইজেট, এবং খুলুন উন্নত ট্যাব। প্রসারিত করুন রূপান্তরিত করে বেগুনি MA ব্যাজ এবং সুইচ সহ বিভাগ সক্রিয় রূপান্তর হ্যাঁ। ছয়টি ট্রান্সফর্ম কন্ট্রোল নরমাল এবং হোভার ট্যাবের অধীনে প্রদর্শিত হয়, প্রতিটি তার পেন্সিল আইকন দিয়ে খোলা থাকে।

উপাদানটি সরান এবং স্কেল করুন #

পাশের পেন্সিলটিতে ক্লিক করুন অনুবাদ করা এবং দুটি স্লাইডার খোলা: X অনুবাদ করুন এবং Y অনুবাদ করুন। ডেমোটি X অক্ষের উপর চিত্র 71 ঠেলে দেয় এবং স্লাইডারটি সরানোর সাথে সাথে এটি ক্যানভাসের অংশের প্রান্তের দিকে স্লাইড করে। মানগুলি উপাদানের নিজস্ব আকারের সাথে আপেক্ষিক, এবং প্রতিটি অক্ষের প্রতি ডিভাইসের নিজস্ব প্রতিক্রিয়াশীল সেটিং রয়েছে৷।

দ্য স্কেল নিয়ন্ত্রণ একই ভাবে কাজ করে। ডেমোতে স্কেল X-কে 1.4-এ সেট করা চিত্রটিকে তার কলামের বাইরে বড় করে, একটি প্লেইন গ্রিড ফ্রেমিং যে ধরনের ব্রেকআউটের জন্য বিভাগের সীমানাকে ওভারল্যাপ করে তা করতে পারে না। স্কেল Y খালি রাখুন এবং এটি X অনুসরণ করে, অথবা স্বাধীন প্রসারিত করার জন্য উভয়ই সেট করুন।

ঘোরান এবং তির্যক একই ভাবে কাজ করুন। কন্ট্রোল খুলুন, স্লাইডারটি টেনে আনুন এবং ক্যানভাসটি আপনার যাওয়ার সাথে সাথে কোণটি দেখায়।

একটি হোভার রূপান্তর যোগ করুন #

সুইচ ঘোরাঘুরি করা ট্যাব এবং একই নিয়ন্ত্রণগুলি শুধুমাত্র কার্সারটি উপাদানটিতে থাকাকালীন প্রযোজ্য, এছাড়াও দুটি অতিরিক্ত: অনুভূমিক উল্টান এবং উল্লম্ব উল্টানো হ্যাঁ/না সুইচ হয়ে যান এবং ক ট্রানজিশন ডিউরেশন (ms) স্লাইডার নিয়ন্ত্রণ করে যে পরিবর্তনটি কত দ্রুত অ্যানিমেট হয়। ডেমোটি 400ms ট্রানজিশনের সাথে ফ্লিপ হরাইজন্টাল চালু করে, তাই ছবিটি হোভারে মসৃণভাবে মিরর করে এবং কার্সার চলে গেলে ফিরে আসে।

পৃষ্ঠায় ফলাফল #

প্রকাশ করুন এবং সামনের প্রান্তটি পরীক্ষা করুন। চিত্রটি ঠিক সম্পাদকে সাজানো হিসাবে তার কলামের পাশ দিয়ে স্থানান্তরিত এবং বড় করা হয়েছে এবং এটিকে ঘোরানো 400ms সহজে ফ্লিপ চালায়। রূপান্তরগুলি বিশুদ্ধ CSS, তাই অতিরিক্ত লোড কিছুই হয় না এবং উপাদানটির চারপাশের বিন্যাস কখনই পুনরায় প্রবাহিত হয় না।

একটি জিনিস মনে রাখবেন: রূপান্তরগুলি শুধুমাত্র চাক্ষুষ। উপাদানটি এখনও লেআউটে তার আসল স্থান দখল করে আছে, তাই একটি ভারী অনুবাদ করা উপাদান তার প্রতিবেশীদের ওভারল্যাপ করতে পারে। এটি সাধারণত বিন্দু, কিন্তু ট্যাবলেট এবং মোবাইল চেক করুন, যেখানে একই অফসেট স্ক্রীনের বেশি কভার করে।

যেখানে রূপান্তর তাদের জায়গা অর্জন করে #

• ব্রেকআউট ছবি। একটি ফটো স্কেল করা হয়েছে এবং এর কলামের প্রান্ত অতিক্রম করেছে একটি হিরো বিভাগের গভীরতা দেয়।
• হোভার ফিডব্যাক। যে কার্ডগুলি কার্সারের নীচে উত্তোলন, কাত বা সামান্য বৃদ্ধি পায় সেগুলি ক্লিকযোগ্য হিসাবে পড়ে।
• ঘোরানো উচ্চারণ। ব্যাজ, স্ট্যাম্প এবং লেবেলগুলি সামান্য কোণে আরও স্বাভাবিকভাবে বসে।
• তির্যক বিভাগ। একটি বিভাজক বা বোতামে কয়েক ডিগ্রি তির্যক আয়তক্ষেত্রের একঘেয়েমি ভেঙে দেয়।
• মিরর করা সম্পদ। একটি দ্বিতীয় চিত্র রপ্তানি করার পরিবর্তে একটি তীর বা চিত্রণ উল্টান৷।

ভিডিও টিউটোরিয়াল #

প্রকাশিত পৃষ্ঠায় এক্সটেনশন সক্ষম করা থেকে হোভার ফ্লিপ পর্যন্ত প্রতিটি নিয়ন্ত্রণ কর্মে দেখুন।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #

মোড়ানো #

ট্রান্সফর্মস এক্সটেনশন আপনাকে এলিমেন্টর প্যানেলের ভিতরে CSS ট্রান্সফর্ম টুলকিট দেয়: হোভার স্টেট এবং মসৃণ ট্রানজিশন সহ যেকোন কিছু সরান, ঘোরান, স্কেল করুন, তির্যক করুন এবং ফ্লিপ করুন। একটি ব্রেকআউট ইমেজ বা একটি হোভার লিফট দিয়ে শুরু করুন এবং সেখান থেকে তৈরি করুন। এটি স্বাভাবিকভাবেই এর সাথে যুক্ত হয় এন্ট্রান্স অ্যানিমেশন এক্সটেনশন গতিতে আসা উপাদানগুলির জন্য, এবং এর সম্পূর্ণ লাইনআপ মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন বাকিগুলো ঢেকে দেয়।