طراحی فلیپ باکس با HTML & CSS
مهندس محسن صادق نژاد
این پست با مسیر متخصص CSS مرتبط است. مشاهده مسیر (Roadmap)
این پست با مسیر متخصص HTML مرتبط است. مشاهده مسیر (Roadmap)
در این آموزش ویدئویی قصد داریم یک باکس ایجاد کنیم که پشت و جلوی این باکس دارای متن متفاوت باشند و با بردن موس بر روی این باکس متن پشت نمایان شود. نام این باکس فلیپ باکس می باشد. شما می توانید ویدئویی آموزشی ایجاد فلیپ باکس را تماشا کنید:
برای این بخش فقط از دستورات HTML & CSS استفاده کرده ایم. سورس کد و توضیحات مربوطه را می توانید در ادامه مشاهده کنید.
کدهای HTML فلیپ باکس:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Tutsxen AcaDemy</title>
</head>
<body>
<div class="all-box">
<div class="first-box">
<div class="first-box-front">
<h2>آکادمی تاتژن</h2>
</div>
<div class="first-box-back">
<h2>مسیرتو انتخاب کن! </h2>
</div>
</div>
</div>
</body>
</html>
در بالا سه DIV ساخته ایم که با کلاس های مجزا آن هارا مشخص کرده ایم. سراغ کدهای CSS می رویم و استایل هایی که به این کلاس ها داده ایم را بررسی میکنیم.
کد های CSS :
body{
direction: rtl;
}
.all-box {
width: 600px;
height: 400px;
margin: 20px;
background-color: transparent;
border: 1px solid #ccc;
perspective: 1000px;
}
.first-box{
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 1s;
transform-style: preserve-3d;
}
.all-box:hover .first-box {
transform: rotateY(180deg);
}
.first-box-front, .first-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.first-box-front {
background-color: #bbb;
color: black;
}
.first-box-back {
background-color: #1e90ff;
color: white;
transform: rotateY(180deg);
}
با کمک transform که در جلسات گذشته آن را بررسی کرده ایم، خاصیت دوران 180 درجه ای را به بخش های مشخص شده اعمال می کنیم.
ویژگی backface-visibility این امکان را برای ما مهیا میکند تا بتوانیم تصویر پشت یک عنصری را ببینیم. تصویر پشت یک عنصر در واقع یک تصویر آینه ای از قسمت جلویی عنصر است و با این ویژگی که در چرخش ها به کمک ما می آید می گوییم که تصویر پشت یک المان دیده شود یا خیر، در کدهای بالا backface-visibility: hidden; نوشته شده است که در هنگام چرخش عنصر، ناحیه پشتی آن مشاهده نمی شود.
در کلاس all-box از perspective استفاده کرده ایم که برای ما یک فضای سه بعدی به ابعادی که مشخص کرده ایم را در نظر میگیرد. برای درک بیشتر مطلب و مشاهده مثال های بیشتر می توانید به سایت w3school رفته و این property را بیشتر بررسی کنید.
کدهای بالا در بخش CSS برای دوران در محور Y ها می باشد. برای چرخش در محور X ها می توانید عبارت rotateY(180deg) را به rotateX(180deg) تغییر بدهید. با تغییر اندازه زاویه از 180 درجه به مقداری کمتر یا بیشتر چه اتفاقی می افتد؟
خب به پایان آموزش ایجاد فلیپ باکس با CSS رسیدیم. در صورت هر گونه مشکلی در قسمت نظرات می توانید سوال خود را مطرح کنید. موفق باشید.
