TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে CSS রোটটিং কিউব উইজেট তৈরি করবেন?

0

সিএসএস একটি জন্তু, বিশেষ করে যখন আপনি শেখার পর্যায়ে থাকেন, বিভিন্ন বৈশিষ্ট্য অনুশীলন করা মজাদার। CSS ওয়েবকিট অ্যানিমেশন বৈশিষ্ট্যগুলি আপনার সাইটের জন্য আকর্ষণীয় অ্যানিমেশন তৈরির জন্য খেলতে আকর্ষণীয়। এই প্রবন্ধে আমরা কীফ্রেম ব্যবহার করে একটি সাধারণ সিএসএস ঘোরানো কিউব উইজেট তৈরি করব।

সম্পর্কিত: নতুনদের জন্য HTML টিউটোরিয়াল।

ঘূর্ণন কিউব কি?

ঘোরানো কিউব দেখতে নিচের মত হবে।

আপনি কিউবের ছয়টি মুখে টেক্সট বা ছবি প্রদর্শন করতে পারেন এবং ঘূর্ণন গতি নিয়ন্ত্রণ করতে পারেন যাতে দর্শকরা ঘূর্ণনের সময় বুঝতে পারে। উদাহরণস্বরূপ, আপনি সংশ্লিষ্ট পণ্যের পৃষ্ঠার সাথে সংযুক্ত প্রতিটি ছবির সাথে স্টোর পেজে প্রদর্শনের জন্য আপনার পণ্যের ছবি ব্যবহার করতে পারেন।

উইজেটের উপাদান

উইজেটের দুটি উপাদান রয়েছে – CSS এবং HTML। ওয়েবপৃষ্ঠার শিরোনাম বিভাগের ভিতরে CSS অংশ এবং শরীরের ভিতরে HTML অংশ রাখার সুপারিশ করা হয়।

উইজেটের জন্য 1 সিএসএস

নিচে ঘূর্ণনকারী ঘনক উইজেটের জন্য CSS দেওয়া হল। আমরা প্রথমে একটি বাক্স সংজ্ঞায়িত করি, ছয়টি দিক যুক্ত করি এবং ওয়েবকিট কীফ্রেমস অ্যানিমেশন দিয়ে বাক্সটি ঘোরাই।

<style type="text/css"> #box div { position: absolute; height: 250px; width: 250px; border: 1px solid lightgrey; background: rgba(255,200,100,0.8); text-align: center; font-size: 200px; } #box { -webkit-animation-name: animation; -webkit-animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; margin:80; -webkit-transform-style: preserve-3d; -webkit-transform-origin: 125px 125px 0; } #box .one { -webkit-transform: translateZ(125px); } #box .two { -webkit-transform: rotateX(-90deg) translateZ(125px); } #box .three { -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(125px); } #box .four { -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(125px); } #box .five { -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(125px); } #box .six { -webkit-transform: rotateY(90deg) translateZ(125px); } @-webkit-keyframes animation { from,to{} 16% { -webkit-transform: rotateY(-90deg);} 33% { -webkit-transform: rotateY(-90deg) rotateZ(135deg);} 50% { -webkit-transform: rotateY(225deg) rotateZ(135deg);} 66% { -webkit-transform: rotateY(135deg) rotateX(135deg);} 83% { -webkit-transform: rotateX(135deg);} } </style>

উইজেটের জন্য 2 টি এইচটিএমএল

নীচে এইচটিএমএল কোড উইজেট, আপনাকে আপনার নিজের ইমেজ ইউআরএল দিয়ে ছবিগুলি প্রতিস্থাপন করতে হবে।

<div id="view" style="width:350px; height:250px; margin:80px auto 0 auto;"> <div id="box"> <div class="one"><img src="https://img.webnots.com/2016/09/A-One.png"></div> <div class="two"><img src="https://img.webnots.com/2016/09/B-Two.png"></div> <div class="three"><img src="https://img.webnots.com/2016/09/C-Three.png"></div> <div class="four"><img src="https://img.webnots.com/2016/09/D-Four.png"></div> <div class="five"><img src="https://img.webnots.com/2016/09/E-Five.png"></div> <div class="six"><img src="https://img.webnots.com/2016/09/F-Six.png"></div> </div> </div>

উইজেট কাস্টমাইজ করা

আপনি আপনার প্রয়োজন অনুযায়ী উইজেট কাস্টমাইজ করতে পারেন এবং নিচে কিছু অপশন দেওয়া হল:

  • বাক্সের আকার 250x250px এবং ট্রান্সলেট Z ব্যবহার করা হয় অর্ধেক প্রস্থ 125px হিসাবে। আপনি যদি বাক্সের আকার পরিবর্তন করতে চান, তাহলে সেই অনুযায়ী এই দুটি পরামিতি পরিবর্তন করতে ভুলবেন না।
  • বাক্সের একই মাত্রাযুক্ত ছবিগুলি ব্যবহার করা নিশ্চিত করুন। এই উদাহরণে, আমরা বাক্সের সব পাশে 250x250px ছবি ব্যবহার করেছি। আপনি বিভিন্ন চেহারায় ইমেজ বা টেক্সট / ইমেজ কম্বিনেশনের পরিবর্তে যেকোনো টেক্সট ব্যবহার করতে পারেন।
  • ঘূর্ণন গতি CSS- এ 6 সেকেন্ড হিসাবে সংজ্ঞায়িত করা হয়েছে “-webkit-animation-duration: 6s;"।
  • রূপান্তর গতি পরিবর্তন করতে কীফ্রেম অ্যানিমেশন শতাংশ মান ব্যবহার করুন।
  • এইচটিএমএল কোডে 350px প্রস্থ, 250px উচ্চতা এবং 180px মার্জিন হিসাবে বাক্সের অবস্থান সংজ্ঞায়িত করা হয়েছে। আপনি আপনার ওয়েবপেজে কিউবকে সঠিকভাবে স্থাপন করতে এই মানগুলি সামঞ্জস্য করতে পারেন।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত