خصوصیت transform-origin
مثال (خصوصیت transform-origin)
تنظیم مکان قرارگیری عنصر تبدیل شده:
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
}
پشتیبانی مرورگرها
مرورگرهای Internet Explorer 10، Firefox و Opera، خصوصیت transform-origin را پشتیبانی می کنند.
Internet Explorer 9 از خصوصیت جایگزین ms-transform-origin- (فقط تبدیل دو بعدی) استفاده می کند.
Safari و Chrome از خصوصیت جایگزین webkit-transform-origin- (تبدیل سه بعدی و دو بعدی) استفاده می کنند.
مرورگر Opera فقط انتقال دو بعدی را پشتیبانی می کند.
تعریف و کاربرد
با استفاده از خصوصیت transform-origin می توان مکان عنصر تبدیل شده را تغییر داد.
عناصر تبدیل شده دو بعدی می توانند در جهت محور xها و محور yها حرکت کنند. اما عناصر تبدیل شده سه بعدی می توانند در جهت محور zها نیز حرکت می کنند.
برای درک بهتر خصوصیت transform-origin، می توانید demo را ملاحظه فرمایید.
توجه: این خصوصیت می بایست با خصوصیت transform به کار گرفته شود.
برای درک بهتر این خصوصیت برای تبدیل سه بعدی demo را ملاخظه فرمایید.
| مقدار پیشفرض | 50% 50% 0 |
|---|---|
| ارث بری | خیر |
| نسخه | CSS3 |
| JavaScript ساختار | object.style.transformOrigin="20% 40%" |
نحوه استفاده
| Property مقدار | توضیحات |
|---|---|
| x-axis |
مشخص می کند عنصر کجای محور xها قرار گیرد. مقادیر ممکن عبارتند از:
|
| y-axis |
مشخص می کند که عنصر کجای محور yها قرار گیرد. مقادیر ممکن عبارتند از:
|
| z-axis |
مشخص می کند که عنصر کجای محور zها قرار گیرد.
|
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 7884
