مقدمه
با عرض سلام خدمت کاربران سایت پی وی لرن . در این پست آموزشی . قصد داریم به آموزش توابع انتقال و حرکت دادن عناصر دو بعدی در css بپردازیم. در css شما می توانید تصاویر را انتقال دهید، بچرخانید ، تغییر اندازه دهید و یا بپیچانید! این قابلیت برای تصاویر و اشیای سه بعدی نیز در css وجو دارد. این قابلیت در اغلب مرورگرها پشتیبانی می شود و این اعمال با عناوین translate (انتقال) و rotate(دوران) و scale (تغییر اندازه) و skew (پیچش) شناخته می شوند.
تغییر و تحول (transformation) افکت هایی هستند که امکان تغییر شکل ، اندازه و محل قرارگیری عناصر html را با استفاده از کدهای css فراهم می کند. در css 3 این قابلیت برای عناصر دوبعدی و سه بعدی پشتیبانی می شود.
در پست های آموزشی قبل در حوزه ی آموزش css ، ما در پی وی لرن به آموزش موضوعات ایجاد گالری تصاویر در css ، معرفی واحدهای تنظیم اندازه در css ، کادر تزیینی دور عناصر در css و همچنین در بحث جلوه های ویژه به آموزش کار با افکت های سایه در css ، پرداختیم.
در مورد مدیریت فضاهای خالی بین عناصر html و منظم کردن قالب وب سایت ، پست های آموزشی و پر کاربرد کار با فضای بین عناصر html در css ، مدیریت فضای خالی داخل عناصر html در css را در پی وی لرن، ارائه کردیم.
در ادامه این پست به آموزش موضوع توابع انتقال ، جابه جایی و حرکت دادن عناصر دو بعدی در css، می پردازیم.
توابع انتقال و حرکت دادن عناصر دو بعدی در css
توابع انتقال و حرکت دادن عناصر دو بعدی در css
در این پست آموزشی در مورد توابع انتقال ، حرکت و جابه جایی عناصر دوبعدی html در css ، توابع زیر را بررسی خواهیم کرد:
- ()translate
- () rotate
- () scale
- () skewX
- () skewY
- () matrix
تابع ()translate
تابع ()translate برای هر عنصر html که اجرا شود ، آن عنصر را از محل فعلی خود به میزانی که تعیین کنید، در جهت محور X و محور Y ، جابه جا می شود.
مثال: در این مثال، عنصر div ازمکان فعلی خود، به اندازه ی ۵۰ پیکسل به راست و ۱۰۰ پیکسل به پایین انتقال می یابد:
مثال :
| div { -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */ transform: translate(50px, 100px); } |
تابع () rotate
تابع () rotate عناصر html را در جهت عقربه های ساعت یا عکس آن، به میزان درجه ای که در تابع تعیین می شود می چرخاند.
مثال: در این مثال تابع <div> به میزان ۲۰ درجه در جهات عقربه های ساعت می چرخد:
مثال :
| div { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); } |
مثال ۲: با استفاده از مقادیر منفی ، می توان عناصر را در خلاف جهت عقربه های ساعت چرخاند:
مثال :
| div { -ms-transform: rotate(-20deg); /* IE 9 */ -webkit-transform: rotate(-20deg); /* Safari */ transform: rotate(-20deg); } |
تابع () scale
تابع () scale اندازه عناصر را بر اساس پارامتر هایی که برای height (ارتفاع) و width (عرض) ، دریافت می کند. بزرگتر و یا کوچکتر می کند.
مثال: در این مثال عنصر <div> ، به میزان ۲ برابر در عرض (width) و ۳ برابر در ارتفاع (height) بزرگتر می شود:
مثال :
| div { -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3); } |
تابع () skewX
تابع () skewX یک عنصر html را در جهت محور x ها ، به میزان درجه تعیین شده، می چرخاند.
مثال: در این مثال عنصر <div> ، به میزان ۲۰ درجه حول محور x ، می چرخد:
مثال :
| div { -ms-transform: skewX(20deg); /* IE 9 */ -webkit-transform: skewX(20deg); /* Safari */ transform: skewX(20deg); } |
تابع () skewY
تابع () skewX یک عنصر html را در جهت محور y ها ، به میزان درجه تعیین شده، می چرخاند.
مثال: در این مثال عنصر <div> ، به میزان ۲۰ درجه حول محور y ، می چرخد:
مثال :
| div { -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg); } |
تابع () skew
تابع () skew، یک عنصر html را به میزان درجه تعیین شده از دو پارامتر ورودی، در حول محور x و محور y می چرخاند.
مثال: در این مثال، عنصر <div> ، به میزان ۲۰ درجه حول محور x، و به میزان ۱۰ درجه حول محور y، می چرخد:
مثال :
| div { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg); } |
تابع () matrix
تابع () matrix ، تمام توابع حرکت و جابه جایی عناصر ( translate (انتقال) و rotate(دوران) و scale (تغییر اندازه) و skew (پیچش)) را در یک تابع خلاصه می کند!
پارامتر های ورودی این تابع به این ترتیب است:(()matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY
مثال:
مثال :
| 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); } |
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
