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

কিভাবে বুটস্ট্র্যাপ ফ্লিপ কার্ড উইজেট তৈরি করবেন?

3

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

উইজেটের সামনে কার্ড এবং পিছনের কার্ড রয়েছে। যখন আপনি মাউস ঘুরিয়ে রাখবেন বা মোবাইল ডিভাইসে স্পর্শ করবেন, তখন সামনের কার্ডের উপাদানটি উল্টে বা ঘোরানো হবে পিছনের দিকে মুখ দেখানোর জন্য। আমরা উল্লম্ব এবং উল্লম্ব উভয় দিকে উল্টানো ব্যাখ্যা করব।

অনুভূমিক বুটস্ট্র্যাপ ফ্লিপ কার্ড উইজেট

যেকোনো বুটস্ট্র্যাপ উইজেটের HTML পৃষ্ঠায় প্রাথমিক CSS এবং স্ক্রিপ্ট সংযুক্ত থাকতে হবে। আপনি হয় CDN লিংক ব্যবহার করতে পারেন অথবা নিজেরাই ফাইলগুলি হোস্ট করতে পারেন। আরো বিস্তারিত জানার জন্য আমাদের বুটস্ট্র্যাপ স্টার্টার টেমপ্লেট দেখুন। আমরা এই নিবন্ধে আমাদের উদাহরণের জন্য বুটস্ট্র্যাপ 4.0 সংস্করণের জন্য CDN লিঙ্ক ব্যবহার করব।

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

উইজেটের তিনটি অংশ রয়েছে – ফ্রন্টসাইড, ব্যাকসাইড এবং প্রধান ইমেজ ফ্লিপ ডিভ। CSS ট্রান্সফর্মটি অনুভূমিক ফ্লিপ ইফেক্ট তৈরির জন্য Y অক্ষের 180 ডিগ্রি পর্যন্ত দিক ঘুরানোর জন্য ব্যবহৃত হয়।

বুটস্ট্র্যাপ অনুভূমিক কার্ড ফ্লিপ উইজেট

নীচে অনুভূমিক ফ্লিপ উইজেটের জন্য সম্পূর্ণ CSS রয়েছে :

.image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; }

বুটস্ট্র্যাপ ফ্লিপ উইজেটের জন্য এইচটিএমএল

আমরা শুধু দুটি কার্ড উপাদান ertোকাই, একটি ফ্রন্টসাইড ডিভির ভিতরে এবং অন্যটি ব্যাকসাইড ডিভির ভিতরে।

<div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div>

সম্পূর্ণ উইজেট কোড

সিএসএস এবং এইচটিএমএল একসাথে রেখে সম্পূর্ণ কোডটি নীচের মত দেখতে হবে:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style type="text/css"> .image-flip:hover .backside, .image-flip.hover .backside { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } .image-flip:hover .frontside, .image-flip.hover .frontside { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .image-flip { margin-bottom:200px; width: 300px; height: 250px; } .mainflip { -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -ms-transition: 1s; -moz-transition: 1s; -moz-transform: perspective(1000px); -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: relative; } .frontside, .backside { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 1s; -webkit-transform-style: preserve-3d; -moz-transition: 1s; -moz-transform-style: preserve-3d; -o-transition: 1s; -o-transform-style: preserve-3d; -ms-transition: 1s; -ms-transform-style: preserve-3d; transition: 1s; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .frontside { -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); z-index: 2; } .backside { background: white; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); transform: rotateY(-180deg); } .card, .card-img-top { border-radius: 0; } </style> </head> <body> <div class="image-flip" ontouchstart="this.classList.toggle('hover');"> <div class="mainflip"> <div class="frontside"> <div class="card" style="width:20rem;"> <img class="card-img-top img- fluid" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="card image"> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is basic card with image on top, title, description and button.</p> </div> </div> </div> <div class="backside"> <div class="card" style="width:20rem;"> <div class="card-header"> This is a Header </div> <div class="card-body"> <h4 class="card-title">Card Title</h4> <p class="card-text">This is a card component with header and footer.</p> <a href="#" class="btn btn-info btn-md">Info Button</a> </div> <div class="card-footer"> This is a Footer </div> </div> </div> </div> </div> </body> </html>

উল্লম্ব কার্ড ফ্লিপ তৈরি করা

কাস্টম CSS কোডে আমরা অনুভূমিক ফ্লিপ ইফেক্ট তৈরির জন্য rotateY (180deg) ব্যবহার করেছি। শুধু rotateY- এর সমস্ত ঘটনাকে rotateX- এ পরিবর্তন করুন। এটি কেবল নীচের মত উল্লম্ব দিক ঘোরানোর জন্য ফন্ট এবং পিছনের দিক পরিবর্তন করবে:

বুটস্ট্র্যাপ উল্লম্ব কার্ড ফ্লিপ উইজেট

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

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