آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تبدیل دوبعدی / 2d transformation

دوره های مرتبط با این مقاله

خاصیت Transform (تغییر وضع نمایش عناصر)

خواص transform در CSS3 به طراح وب امکان می دهند عناصر دلخواه را منتقل کرده, چرخانده, مقیاس بندی و همچنین در صورت لزوم اریب دار کند (با زوایای مختلف بچرخانید). خاصیت transformation (تبدیل) در واقع قابلیت تغییر شکل, اندازه و موقعیت المان مورد نظر را فراهم می آورد.
CSS3 همچنین قابلیت تبدیل دو بعدی و سه بعدی عناصر را پشتیبانی می کند.

متدهای تبدیل دو بعدی در CSS3

در این فصل شما با توابع تبدیل دوبعدی عناصر (2D transformation methods) در CSS3 آشنا خواهید شد:

translate()
rotate()
scale()
skewX()
skewY()
matrix()

نکته:

در مبحث بعدی با تبدیل سه بعدی نیز آشنا خواهید شد.

متد translate()

متد translate() یک عنصر را از موقعیت فعلی آن حرکت می دهد (البته بر اساس پارامترهایی که برای محورهای X و Y تعیین شده است). در واقع با بهره گیری از این متد می توان المان دلخواه را کپی کرده و آن را به مکانی دیگر انتقال داد.
مثال زیر تگ یا عنصر div را به اندازه ی 50 پیکسل به سمت راست و 100 پیکسل پایین تر از موقعیت جاری آن حرکت می دهد:

         
                    div {
                    -ms-transform: translate(50px,100px); /* IE 9 */
                    -webkit-transform: translate(50px,100px); /* Safari */
                    transform: translate(50px,100px);
                    }
                

تابع rotate()

متد rotate() بسته به درجه ی تعیین شده یک عنصر را در جهت عقربه ی ساعت یا در جهت خلاف آن می چرخاند (دوران می کند).
مثالی که زیر مشاهده می کنید المان div را به اندازه ی 20 درجه در جهت حرکت عقربه ی ساعت می چرخاند:

       
                    div {
                    -ms-transform: rotate(20deg); /* IE 9 */
                    -webkit-transform: rotate(20deg); /* Safari */
                    transform: rotate(20deg);
                    }
                

استفاده از مقادیر منفی (negative values) باعث می شود عنصر خلاف عقربه ی ساعت چرخانده شود.
مثال زیر المان div را 20 درجه در خلاف جهت عقربه ی ساعت حرکت می دهد (می چرخاند):

 
                    div {
                    -ms-transform: rotate(-20deg); /* IE 9 */
                    -webkit-transform: rotate(-20deg); /* Safari */
                    transform: rotate(-20deg);
                    }
                

متد Scale()

تابع scale() اندازه ی المان را افزایش یا کاهش می دهد (کوچک و بزرگ می کند). این کار بر اساس پارامترهایی که برای طول و عرض (height ,width) تعریف می شود صورت می پذیرد.
مثال زیر عرض یا پهنای المان div را دو برابر عرض و پهنای اصلی و طول یا ارتفاع آن را سه برابر طول اصلی آن المان تعریف می کند:

 
                    div {
                    -ms-transform: scale(2,3); /* IE 9 */
                    -webkit-transform: scale(2,3); /* Safari */
                    transform: scale(2,3);
                    }
                

نمونه ی زیر عنصر div را نصف عرض و ارتفاع اصلی خود عنصر تعیین می کند:

 
                    div {
                    -ms-transform: scale(0.5,0.5); /* IE 9 */
                    -webkit-transform: scale(0.5,0.5); /* Safari */
                    transform: scale(0.5,0.5);
                    }
                

متد Skew()

می توانید عنصر مورد نظر خود را در 2 جهت عمودی و افقی به صورت 3 بعدی، بر حسب واحد deg و اندازه ی مشخص شده بچرخوانید. به عبارت دیگر به کمک این متد می توان عنصر مورد نظر را با زوایای مختلف حتی 360 بچرخانید.
مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور x (x-axis) و در امتداد محور Y به اندازه ی 10 درجه می چرخاند می کند:

                    div {
                    -ms-transform: skew(20deg, 10deg); /* IE 9 */
                    -webkit-transform: skew(20deg, 10deg); /* Safari */
                    transform: skew(20deg, 10deg);
                    }
                

تابع skewX()

متد skewX() یک المان را در امتداد محور X بر حسب واحد deg می چرخاند. br نمونه ی زیر المان div را در امتداد محور X به اندازه ی 20 درجه می چرخاند:

 
                    div {
                    -ms-transform: skewX(20deg); /* IE 9 */
                    -webkit-transform: skewX(20deg); /* Safari */
                    transform: skewX(20deg);
                    }
                

تابع skewY()

متد skewY() یک عنصر را در امتداد محور Y به اندازه ی درجه ی زاویه ی تعیین شده (بر حسب واحد deg) می چرخاند.
مثال زیر عنصر div را به اندازه ی 20 درجه در امتداد محور Y می چرخاند:

 
                    div {
                    -ms-transform: skewY(20deg); /* IE 9 */
                    -webkit-transform: skewY(20deg); /* Safari */
                    transform: skewY(20deg);
                    }
                

حال چنانچه پارامتر دومی تعیین نشده باشد, مقداری 0 خواهد داشت. بنابراین مثال زیر المان div را به اندازه ی 20 درجه در امتداد محور X می چرخاند:

 
                    div {
                    -ms-transform: skew(20deg); /* IE 9 */
                    -webkit-transform: skew(20deg); /* Safari */
                    transform: skew(20deg);
                    } 
                

متد matrix()

متد matrix() کلیه ی متدهای تبدیل دو بعدی را در یک تابع واحد می گنجاند (ادغام می کند).
تابع matrix() 6 مقدار می گیرد, که شامل توابع ریاضی (mathematics functions) می شود و به شما امکان می دهد المان های خود را بچرخانید, مقایس بندی (کوچک و بزرگ) کنید, حرکت دهید (translate: انتقال دادن) و همچنین آن ها را مطابق نیاز با زوایای مختلف بچرخانید (skew) کنید:

 
                    div {
                    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
                    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
                    transform: matrix(1, -0.3, 0, 1, 0, 0);
                    }
                

تمامی خاصیت های transform CSS3 به ترتیب زیر می باشند:

خاصیت / Property
شرح
transform
وضعیت نمایش المان را به دو بعدی یا سه بعدی تبدیل می کند
transform-origin
اجازه می دهد موقعیت المان های تبدیل شده (transformed element) را تغییر دهید

متدهای تبدیل دوبعدی:

Function / تابع
شرح
matrix(n,n,n,n,n,n)
تبدیل دو بعدی عنصر را با تابع matrix که 6 مقدار به آن اختصاص داده شده باشد, تعریف می کند
translate(x,y)
انتقال دو بعدی عنصر را در حول محورهای X و Y مقدار دهی می کند
translateX(n)
انتقال دو بعدی عنصر را در طول محور X تعریف می کند
translateY(n)
انتقال دو بعدی عنصر را امتداد محور Y تنظیم و مقدار دهی می کند
scale(x,y)
مقیاس بندی عنصر را به صورت دو بعدی تعیین کرده, طول و عرض عناصر را اصلاح می کند
scaleX(n)
مقیاس بندی عنصر را به صورت دو بعدی تعریف کرده, عرض عنصر را تغییر می دهد
scaleY(n)
تبدیل مقیاس عنصر را به صورت دو بعدی تعریف کرده, ارتفاع یا طول آن را اصلاح می کند
rotate(angle)
چرخش عنصر را به صورت دو بعدی تعریف می کند و زاویه ی آن را در پارامتر مربوطه تعیین می کند
skew(x-angle,y-angle)
عنصر را در امتداد هر دو محور X و Y به صورت دو بعدی بسته به مقدار تعیین شده می چرخاند
skewX(angle)
عنصر را به صورت دو بعدی در امتداد محور X می چرخاند (تغییر و تبدیل وضعیت عنصر را به صورت دو بعدی در حول محور X مقداردهی و تعریف می کند)
skewY(angle)
عنصر را به صورت دو بعدی در امتدادی محور Y (بر اساس مقدار تعیین شده) می چرخاند
  • 2363
  •    1012
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .