در جلسه ی هجدهم از جلسات آموزش طراحی سایت به آموزش خصوصیت Transform پرداختیم (برای دیدن آموزش استایل Transform کلیک کنید) در این جلسه می خواهیم به آموزش خصوصیت Transform-origin در CSS بپردازیم با ما همراه باشید. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)
در آموزش های قبلی در مورد خصوصیت Transform صحبت نموده ایم. همانطور که می دانید از خصوصیت Transform برای ایجاد چرخش بزرگ نمایی یا حرکت عناصر در صفحات وب استفاده می شود. در ویژگی Transform-origin علاوه بر حرکت عناصر برو صفحه می توانیم بگوییم که نسبت به یک مبدا خاص تغییرات مورد نظر ما انجام شود. برای مثال همه ی ما می دانیم که در خصوصیت Transform ویژگی Rotate برای ایجاد چرخش بر روی اجسام درون صفحه می باشد. همینطور می دانیم که نقطه ای که یکی از اجزای سایت بر روی آن می چرخد در وسط آن قرار دارد. حال به این فکر کنید که نقطه ی چرخش جسم را تغییر دهیم و آن را در مکان دیگری بگذاریم و بخش مورد نظر ما نسبت به آن نقطه چرخش داشته باشد.
به طور کلی می توان خصوصیت Transform-origin را این گونه تعریف نمود: خصوصیت Transform-origin خصوصیتی است که برای تعیین مبدا مختصاتی در تغییر مکان، وضعیت یا شکل عناصر مورد استفاده قرار می گیرد. به مثال زیر توجه کنید:
کد HTML:
<div class="khatchin"> <div class="box"> top right </div> </div>
کد CSS:
body {
background-color: #fff;
height: 800px;
text-align: center;
}
.khatchin {
width: 150px;
height: 150px;
border: 1px dashed #000;
margin: 250px auto;
display: inline-block;
}
.box {
width: 150px;
height: 150px;
background: #fb8c00;
position: relative;
font-size: 30px;
color: #FFF
}
body:hover .box {
transform: rotate(45deg);
transition: 1s;
transform-origin: top right;
}
خروجی کد بالا:
همانطور که مشاهده می کنید خروجی کد بالا یک مربع می باشد که درون یک خط چین قرار دارد. خروجی بالا زمانی است که هنوز موس بر روی صفحه قرار نگرفته است. زمانی که اشاره گر بر روی صفحه قرار گیرد کد بالا به صورت کامل اجرا می شود و خروجی پایین را مشاهده می کنید.
تا اینجای کار عموما با ویژگی Transform-origin آشنا شده اید و می دانید که کار این ویژگی چیست. حال میخواهیم نکاتی را در مورد نوشتن اندازه ها در این ویژگی به شما بیاموزیم.
نکته ی اول: در صورتی که بخواهیم از خصوصیت Transform-origin استفاده کنیم در نوشتن اندازه ها باید دقت داشته باشید که این خصوصیت مقادیری مانند top، left، right، bottom و یا مقداری مانند px و یا حتی درصد نیز مورد قبول می باشد.
نکته ی دوم: دقت داشته باشید در به یک مقادیر نیز می توان خروجی لازم از این خصوصیت را دریافت نمود اما در صورتی که میخواهیم خروجی ما دقیق و زیبا باشد نیاز است که از دو مقدار استفاده کنیم.
نکته ی سوم: در صورتی که می خواهید از مقادیر px یا درصد استفاده کنید به این موضوع توجه کنید که مقادیری که هر دو عدد مورد نظر ما صفر باشند بخش مورد نظر ما از سمت چپ و بالای جسم شروع به تغییر می کند، یعنی عموما نقطه ی شروع ما برای ایجاد مقادیر مورد نظر در خصوصیت Transform-origin بالاترین نقطه در سمت چپ جسم می باشد.
نکته ی چهارم: در حالت پیش فرض مقادیر خصوصیت Transform-origin بر روی ۵۰% ۵۰% قرار دارد یعنی مرکز جسم.
نکته ی پنجم: در صورتی که خصوصیت Transform دو بعدی باشد از دو مقدار در خصوصیت Transform-origin استفاده می کنیم اما در صورتی که خصوصیت Transform باید از سه مقدار در خصوصیت Transform-origin استفاده کنیم که مقدار سوم نمی تواند از کلمات کلیدی باشد و همیشه باید از px یا em یا درصد و… تشکیل شده باشد.
نکته ی ششم: در صورتی که در خصوصیت Transform-origin دو بعدی باشد و مقدار دوم را ننویسیم به صورت پیش فرض بر روی Center قرار می گیرد. در صورتی که بخواهیم این خصوصیت سه بعدی باشد و مقدار سوم را ننویسیم به صورت پیشفرض بر روی صفر قرار می گیرد.
در صورتی که می خواهید از این خصوصیت استفاده کنید باید بدانید که در نسخه های قدیمی تر پشتیبانی نمی شود و برای پشتیبانی در همه ی نسخه ها باید از پیشوند هر مرورگر استفاده کنید.
پیشوند مرورگر گوگل کروم و سافاری: -webkit-
پیشوند مرورگر Opera: -o-
پیشوند مرورگر فایر فاکس: -moz-
حال شاید با خود فکر کنید که چگونه باید از این پیشوند ها استفاده کنید به نمونه کد زیر توجه کنید:
کد HTML:
<div class="khatchin"> <div class="box1"> top right </div> </div> <div class="khatchin"> <div class="box2"> ۳۰% ۷۰% </div> </div>
کد CSS:
body {
background-color: #fff;
height: 800px;
text-align: center;
}
.khatchin {
width: 150px;
height: 150px;
border: 1px dashed #000;
margin: 250px 100px;
display: inline-block;
}
.box1 {
width: 150px;
height: 150px;
background: #fb8c00;
position: relative;
font-size: 30px;
color: #FFF
}
.box2 {
width: 150px;
height: 150px;
background: #fb8c00;
position: relative;
font-size: 30px;
color: #FFF
}
body:hover .box1 {
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
transition: 1s;
-webkit-transform-origin: 100% 0%;
-o-transform-origin: 100% 0%;
-moz-transform-origin: 100% 0%;
transform-origin: 100% 0%;
}
body:hover .box2 {
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-moz-transform: scale(.5);
transform: scale(.5);
transition: 1s;
-webkit-transform-origin: 70% 30%;
-o-transform-origin: 70% 30%;
-moz-transform-origin: 70% 30%;
transform-origin: 70% 30%;
}
خروجی کد بالا:
عکس بالا برای زمانی است که صفحه ی ما هاور نشده باشد. پس از هاور شدن مانند شکل زیر می شود.
خلاصه مطلب
