3D এবং CSS

Paul Kinlan

ভূমিকা

দীর্ঘ সময় ধরে 3D ডেস্কটপ অ্যাপ্লিকেশনের সংরক্ষণ করা হয়েছে। সম্প্রতি উন্নত স্মার্টফোনগুলির প্রবর্তনের সাথে সাথে স্থানীয় GPU ত্বরণে অ্যাক্সেস রয়েছে, আমরা প্রায় সর্বত্র 3D ব্যবহার করা দেখতে শুরু করেছি।

সাধারণত, 3D প্রাথমিকভাবে গেমিং বা কিছু উন্নত ব্যবহারকারী ইন্টারফেসের জন্য একটি ডিভাইস হিসাবে ব্যবহৃত হয়। WPF এবং সিলভারলাইটে পরিপ্রেক্ষিত রূপান্তরের প্রবর্তন না হওয়া পর্যন্ত ব্যবহারকারী ইন্টারফেস উপাদানগুলিতে 3D প্রভাব প্রয়োগের জন্য একটি উপযুক্ত মডেল অ্যাপ্লিকেশন বিকাশকারীদের জন্য একটি ব্যবহারিক সমাধান হয়ে উঠেছে (সবকিছুর পরেও 3D ঠিক সহজ নয়)।

CSS 3D ট্রান্সফর্ম মডেলটি মার্চ 2009-এ একটি খসড়া স্পেসিফিকেশন হিসাবে চালু করা হয়েছিল ওয়েব ডেভেলপারদের আকর্ষণীয় এবং আকর্ষক ইউজার ইন্টারফেস তৈরি করার জন্য যা অ্যাপ্লিকেশন লেখকদের যেকোন ভিজ্যুয়াল DOM উপাদানে 3D দৃষ্টিকোণ রূপান্তর প্রয়োগ করার অনুমতি দিয়ে 3D এর সুবিধা গ্রহণ করে।

CSS 3D ট্রান্সফরমেশন ওয়ার্কিং ড্রাফ্ট হল CSS 2D ট্রান্সফরমেশন মডেলের একটি লজিক্যাল এক্সটেনশন, কিছু অতিরিক্ত বৈশিষ্ট্য প্রবর্তন করে, যার মধ্যে রয়েছে: দৃষ্টিকোণ, ঘূর্ণন এবং একটি 3D স্পেসে রূপান্তর।

এর আগে আমরা এত সহজে 3D ইন্টারফেস তৈরি করতে পারিনি। এই প্রযুক্তিগুলি প্রবেশের বাধাকে কমিয়ে দিয়েছে। 3d উপাদান তৈরি করার জন্য আপনাকে আর গাণিতিক হুইজ হতে হবে না।

এটি অবশ্যই উল্লেখ্য যে CSS 3D মডিউলটি বিকাশকারীদের সমৃদ্ধ এবং দৃশ্যত আকর্ষণীয় অ্যাপ্লিকেশনগুলি তৈরি করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে, এটি আপনাকে নিমজ্জিত 3d বিশ্ব তৈরি করতে সক্ষম করার জন্য ডিজাইন করা হয়নি৷

ব্রাউজার সমর্থন এবং হার্ডওয়্যার ত্বরণ

-ওয়েবকিট-দৃষ্টিকোণ

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

• 36
• 12
• 16
• 9

উৎস

-ওয়েবকিট-ট্রান্সফর্ম-3ডি

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

• 2
• 12
• 49
• 4

উৎস

মনে রাখা গুরুত্বপূর্ণ তথ্য হল যে যদিও একটি ব্রাউজার 3d কে "সমর্থন" করতে পারে, এটি হার্ডওয়্যার এবং ড্রাইভারের সীমাবদ্ধতার কারণে 3D রেন্ডার করতে সক্ষম নাও হতে পারে। DOM-এর উপর ভিত্তি করে 3D দৃশ্যগুলি খুব গণনাগতভাবে ব্যয়বহুল হতে পারে এবং তাই ব্রাউজার বিক্রেতারা একটি বিশুদ্ধ সফ্টওয়্যার রেন্ডারিং সমাধান দিয়ে ব্রাউজারগুলিকে ধীর করার পরিবর্তে সিদ্ধান্ত নিয়েছে, তারা পরিবর্তে GPU এর সুবিধা নেবে যা সমস্ত প্ল্যাটফর্মে উপলব্ধ নাও হতে পারে।

বৈশিষ্ট্য সনাক্তকরণ

বৈশিষ্ট্য সনাক্তকরণ সম্পর্কে কি? আমি আশা করছিলাম যে আপনি জিজ্ঞাসা করতে যাচ্ছেন না! বিকাশকারীরা নির্দিষ্ট ব্রাউজার বৈশিষ্ট্য এবং ক্ষমতার জন্য সমর্থন সনাক্ত করতে Modernizr এর মতো সরঞ্জামগুলি ব্যবহার করে আসছে। 3D রূপান্তরের জন্য সমর্থনের উপস্থিতি সনাক্ত করা সম্ভব হলেও হার্ডওয়্যার ত্বরণের উপস্থিতি সনাক্ত করা সম্ভব নয় এবং হার্ডওয়্যার ত্বরণ হল মূল উপাদান।

মৌলিক নমুনা

সোজা ভিতরে ঝাঁপিয়ে পড়ার চেয়ে ভাল আর কিছু নেই। এই নমুনায় আমরা একটি নির্বিচারে DOM উপাদানের ঘূর্ণনের একটি মৌলিক সেট প্রয়োগ করব।

আমরা মূল উপাদানের একটি দৃষ্টিকোণ সংজ্ঞায়িত করে শুরু করি।

<div style="-webkit-perspective: 800; perspective: 800; margin: 100px 0 0 50px">

দৃষ্টিকোণ গুরুত্বপূর্ণ কারণ এটি 3D দৃশ্যের গভীরতা কীভাবে রেন্ডার করা হয় তা সংজ্ঞায়িত করে, 1-1000-এর মানগুলি খুব উচ্চারিত প্রভাব তৈরি করবে, এবং 1000-এর বেশি মান তাই কম৷ তারপরে আমরা একটি iframe যোগ করি এবং Z এবং Y অক্ষের চারপাশে 30 ডিগ্রি ঘূর্ণন প্রয়োগ করি

<iframe
    src="http://www.html5rocks.com/"
    style="-webkit-transform: rotate3d(0, 1, 1, 30deg)"></iframe>

বিএএম! এটি হল, উপাদানটি সম্পূর্ণভাবে ইন্টারেক্টিভ, এবং সব দিক থেকে এটি একটি সম্পূর্ণরূপে উন্নত DOM উপাদান (এটি ব্যতীত যে এটি এখন আরও শীতল দেখায়)৷ যদি আপনার ব্রাউজার 3D রূপান্তর সমর্থন না করে, তাহলে কিছুই হবে না। আপনি কোন ঘূর্ণন প্রয়োগ ছাড়াই একটি সাধারণ আইফ্রেম দেখতে পাবেন। আপনার ব্রাউজার যদি 3d রূপান্তর সমর্থন করে তবে হার্ডওয়্যার ত্বরণ ছাড়াই, এটি একটু অদ্ভুত দেখাতে পারে।

অ্যানিমেটিং

CSS3 3D রূপান্তর সম্পর্কে আমি যে জিনিসটি পছন্দ করি তা হল এটি CSS ট্রানজিশন মডিউলের সাথে খুব সুন্দরভাবে সংযুক্ত। অ্যানিমেশন এবং ট্রানজিশন CSS-এ সংজ্ঞায়িত করা সহজ, এবং 3d-এ প্রয়োগ করাও এর ব্যতিক্রম নয়।

একটি 3D দৃষ্টিকোণ প্রয়োগ করা উপাদানগুলিকে অ্যানিমেট করা সহজ। সহজভাবে "পরিবর্তন" শৈলীকে "রূপান্তর" হিসাবে সেট করুন, একটি সময়কাল এবং একটি অ্যানিমেশন ফাংশন সংযুক্ত করুন। তারপর থেকে, "ট্রানফর্ম" শৈলীতে যেকোনো পরিবর্তন অ্যানিমেটেড হবে।

আমরা ইনলাইন শৈলীর পরিবর্তে নথি শৈলী ব্যবহার করার জন্য পূর্ববর্তী উদাহরণগুলিকে পুনরায় ফ্যাক্টর করেছি। এটি কেবল উদাহরণটি পরিষ্কার করে না, এটি নমুনাটিকে :hover সিউডো নির্বাচকের সুবিধা নিতে দেয়। :hover নির্বাচক ব্যবহার করে, উপাদানের উপর মাউস সরানোর মাধ্যমে রূপান্তর শুরু করা যেতে পারে। অসাধারন!

সারাংশ

CSS 3D রূপান্তর ব্যবহার করে যেকোন দৃশ্যমান DOM উপাদানে প্রয়োগ করা যেতে পারে এমন কিছু দুর্দান্ত প্রভাবগুলির উপর এটি কেবল একটি দ্রুত নজর ছিল। এখনও অনেক কিছু করা যেতে পারে যা এই টিউটোরিয়ালে কভার করা হয়নি।