آموزش کار با transition و transform در css
به نام خدا در این آموزش قصد داریم با استفاده از css و به کمک خاصیت transition و transform یه جعبه درباره نویسنده طراحی کنیم. اکثر سایت های وردپرسی یه جعبه درباره نویسنده داره که اطلاعاتی راجع به نویسنده به همراه عکس نویسنده رو نمایش میده. ما در این آموزش می خواهیم وقتی کاربر نشانگر ماوس رو به روی دکمه About میبره (عمل focus) جعبه درباره نویسنده به همراه عکس نمایش داده بشه خب ابتدا یه صفحه html با نام دلخواه خودتون ایجاد کنید و کد زیر رو داخلش کپی کنین
<!DOCTYPE html>
<html>
<head lang="fa">
<meta charset="utf-8">
<title>آموزش برنامه نویسی با چسبون</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
<h1>آموزش برنامه نویسی با چسبون</h1>
<h3><a href="http://www.chasboon.ir">chasboon.ir</a></h3>
</div>
<div id="content">
<div class="textBox">
<img class="aboutButton" src="image/about.jpg" alt="about">
<p class="aboutText"> سلام دوستان عزیز حمید بابایی هستم به همراه دوست عزیزم آرمان با سایت چسبون در خدمت شما هستیم. امیدواریم که مطالب آموزشی ما رو دنبال کنید و از آموزش ها لذت ببرید. برنامه نویسی را بصورت حرفه ای با ما تجربه کنید. </p>
<div class="imageBox">
<img class="image" src="image/logo1.jpg" alt="picture">
</div>
</div>
</div>
</body>
</html>حالا نوبت به استایل دهی میرسه اینم کد css مربوط به صفحه. کد ها رو با نام style.css و در مسیر ریشه فایل قبلی ذخیره کنید (هردو فایل داخل یه پوشه باشه)
body{
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
}
#header{
border-bottom: 1px solid #d8d8d8;
}
#content{
width: 100%;
height: 100vh;
display: block;
}
.textBox{
width: 70px;
height: 183px;
float: left;
display: inline-block;
padding: 0 5px;
border: 1px solid #888;
overflow: hidden;
transition: width 2s, height 2s;
}
.textBox:hover{
width: 100%;
}
.aboutButton{
height: 180px;
border: 1px solid #333;
}
.aboutText{
width: 60%;
float: left;
padding: 20px 12px;
text-align: justify;
direction: rtl;
}
.imageBox{
float: left;
width: 30%;
display: inline-block;
transition: width 2s, height 2s transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-ms-transition: width 2s, height 2s, -ms-transform 2s;
-o-transition: width 2s, height 2s, -o-transform 2s;
}
.imageBox:hover{
transform: rotate(720deg);
-moz-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
}
.image{
max-width: 100%;
height: auto;
}
دقت کنین ما تو این پروژه فایل استایل رو در مسیر ریشه و تصاویر رو درون پوشه ای به نام image ذخیره کردیم. خب توضیح مختصری در مورد کد های بالا بدم که چیکار میکنن:
تگ div با id= content تمام اطلاعات صفحه رو شامل میشه و برای قالب بندی بهتر ازش استفاده کردیم. div با id = textbox جعبه درباره نویسنده رو در بر میگیره که از سه قسمت تشکیل شده:
- دکمه About
- تصویر نویسنده
- توضیحاتی در مورد نویسنده
خب یه توضیح هم در مورد کدهای css بدم خاصیت width طول عنصر رو مشخص میکنه خاصیت height هم عرض عنصر رو تعیین میکنه خاصیت float عنصر رو به حالت شناور در میاره یعنی شما میتونید چند عنصر رو کنار هم تو یک سطر قرار بدید تمرکز ما روی خاصیت transition و transform هست خاصیت transition سرعت اجرای افکت رو تعیین می کنه که ما در این مثال تغییر عرض کادر رو با 2 ثانیه و تغییر ارتفاع رو هم با 2 ثانیه مقدار دهی کردیم خاصیت transform هم نوع افکت رو مشخص میکنه که ما در این مثال از افکت چرخش به میزان 720 درجه استفاده کردیم نکته ای که باید اشاره کنم اینه که باید خواص مربوط به transition رو به عنصر parent (والد یا پدر) تخصیص بدین و خاصیت transform رو به عنصر داخلی نسبت بدید. خاصیت hover هم زمانی اجرا میشه که نشانگر ماوس روی عنصر قرار بگیره به این ترتیب دستورات داخلش اجرا میشه امیدوارم از این آموزش لذت برده باشید. برای مشاهده دموی صفحه روی لینک زیر بزنید
مشاهده دمو
برای مطالعه و دسترسی به منابع بیشتر اینجا کلیک کنید در صورت تمایل فایل پیوست رو از اینجا دنلود کنید
