سبد (0)

تبدیل دو بعدی در CSS3

تبدیل دو بعدی یا (2D transforms) در CSS3

Wiki

با استفاده از تبدیل دو بعدی در CSS3 می توانید عناصر را حرکت دهید، بچرخانید، خم کنید، تغییر اندازه دهید و یا بکشید.

CSS3 Transforms

تبدیل دو بعدی چگونه کار می کند؟

تبدیل دو بعدی یک افکت است که به عناصر اجازه می دهد تا شکل، اندازه و مکانشان تغییر کند.

شما می توانید عناصر داخل صفحه را با استفاده از تبدیل دو بعدی و سه بعدی، تبدیل کنید.


پشتیبانی مرورگرها

Wiki

خاصیتپشتیبانی مرورگرها
transform

مرورگرهای Internet Explorer 10, Firefox, Opera خاصیت transform را پشتیانی می کنند.

مرورگرهای Chrome and Safari به پیشوند -webkit- نیاز دارند.

توجه: Internet Explorer 9 به پیشوند -ms- نیاز دارد.


تبدیل دو بعدی (2D Transforms)

Wiki

در این مطلب با متدهای تبدیل دو بعدی زیر آشنا می شوید:

  • ()translate
  • ()scale
  • ()skew
  • ()matrix

در مطلب بعدی، درباره تبدیل سه بعدی توضیح داده خواهد شد.


متد ()translate

Wiki

Translate

با استفاده از متد ()translate، می توان عناصر را نسبت به مکان جاریشان حرکت داد. میزان این حرکت به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- فاصله از چپ 2- فاصله از بالا )

مثال (تبدیل دو بعدی در CSS3)

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
خودتان امتحان کنید »

در مثال بالا، عنصر <div> به اندازه 50 پیکسل از چپ و 100 پیکسل از بالا، حرکت داده شده است.


متد ()rotate

Wiki

Rotate

با استفاده از متد ()rotate، می توان عناصر را در جهت عقربه های ساعت چرخاند. مقادیر منفی، عنصر را در جهت عکس عقربه های ساعت می چرخاند.

مثال (تبدیل دو بعدی در CSS3)

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

در مثال بالا، عنصر <div> به اندازه 30 درجه در جهت عقربه های ساعت می چرخد.


متد ()scale

Wiki

Scale

با استفاده از متد ()scale، می توان اندازه و یا مقیاس عناصر را افزایش و یا کاهش داد، میزان این تغییر به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- میزان تغییر عرض 2- میزان تغییر ارتفاع)

مثال (تبدیل دو بعدی در CSS3)

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
}
خودتان امتحان کنید »

در مثال بالا، عرض عنصر <div> دو برابر و ارتفاع آن، چهار برار شده است.


متد ()skew

Wiki

Skew

با استفاده از متد ()skew، می توان عناصر را کج کرد، میزان این تغییر به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- میزان تغییر در جهت افقی 2- میزان تغییر در جهت عمودی)

مثال (تبدیل دو بعدی در CSS3)

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

در مثال بالا، عنصر <div> به صورت افقی 30 درجه و به صورت عمودی 20 درجه، کج شده است.


متد ()matrix

Wiki

Rotate

متد ()matrix دربردارنده تمامی تبدیل های دو بعدی است.

متد matrix دارای شش پارامتر است، حاوی توابع ریاضی، که به شما اجازه می دهد عناصر را بچرخانید (rotate)، بزرگ یا کوچک کنید (scale)، حرکت دهید (translate)، یا آنرا کج (skew) کنید.

مثال (تبدیل دو بعدی در CSS3)

نحوه چرخاندن عنصر <div> با استفاده از متد matrix:

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
خودتان امتحان کنید »

خاصیت های تبدیل در CSS3

Wiki

در جدول زیر، لیست تمام خاصیت های تبدیل آورده شده است:

خاصیتتوضیحاتCSS
transform برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود. 3
transform-origin به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید. 3

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

Wiki

متدتوضیحات
matrix(n,n,n,n,n,n) تمامی تبدیل های دو بعدی را دربردارد.
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 کج می کند.
skewY(angle) عنصر را در جهت محور Y کج می کند.

آموزش صوتی CSS3

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه