تغییر شکل های دو بعدی در CSS3

تغییر شکل دو بعدی در CSS3 – آموزش CSS مقدماتی درس 41

ساختار Transform  دوبعدی  در CSS3 به شما این امکان را می‌دهد که بتوانید عناصر را در فضای دو بعدی تغییر و حرکت دهید.

تغییرات دو بعدی عناصر

با استفاده از ساختار تغییر شکل های دو بعدی در CSS3 شما این امکان را دارید که بتوانید از دستورات پایه ای جابجائی مانند move (برای حرکت)، scale (برای مقیاس دادن)و skew (برای خم کردن) اشیا در یک فضای دو بعدی استفاده کنید.

تغییر دو بعدی اشیا به صورت دوبعدی تاثیری را بروی عناصر کناری ندارد، اما عنصر متحرک می‌تواند بر روی آن ها حالت همپوشانی داشته باشد، این دقیقا مانند زمانی است که عنصرها به صورت absolute (یا مطلق) موقعیت دهی شده باشند. با این که عنصر در فضا تغییر می‌کنند، اما مکان پیش فرض و اولیه آن بدون تغییر می‌ماند و توسط اشیاء دیگر اشغال نمی شود.

استفاده از Transform  و تابع های وابسته آن در CSS

ویژگی Transform در CSS3 این امکان را به شما می‌دهد که بتوانید از تابع های مختلفی که در آن وجود دارد استفاده کنید تا بر حسب سیستم مختصاتی یک عنصر را تغییر دهدید و یا آنکه اثر جابجائی و تغییر شکل را برای آن اجرا کنید.

بخش هائی که در ادامه می‌آیند، این سه تابع جابجائی را به صورت کامل توضیح می‌دهند:

تابع ()Translate

این تابع سبب می‌شود که یک عنصر از موقعیت فعلی خود حرکت کرده و به یک موقعیت دیگر در راستای محور افقی (X) یا محور عمودی (Y) برسد. این تابع می‌تواند به صورت translate (tx, ty) نوشته شود. اگر هر کدام از این مقادیر تعریف نشوند، آن ها به صورت پیش فرض صفر در نظر گرفته می‌شوند.

مثال

img {

    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */

     -moz-transform: translate(200px, 50px);  /* Firefox */

     -ms-transform: translate(200px, 50px);  /* IE 9 */

     transform: translate(200px, 50px);  /* Standard syntax */   

}

در اینجا تابع translate(200px, 50px) سبب می‌شود که تصویر ما به صورت افقی 200 پیکسل و به صورت عمودی 50 پیکسل حرکت کند. در اینجا مقدارهای مثبت به معنای حرکت به سمت راست و بالا است. اگر مقدارها منفی باشند به ترتیب به معنای حرکت به سمت چپ و پائین خواهد بود.

تابع ()Translate

تابع ()Translate

 

تابع ()rotate

تابع  rotate() سبب می‌شود که عنصر مورد نظر ما در حول نقطه کانونی (origin) خود گردش کند. این نقطه می‌تواند به وسیله ویژگی transform-origin تعیین شود. مقداری که این تابع قبول می‌کند به صورت درجه است.  شکل کامل این تابع می‌تواند به صورت rotate(a) باشد.

مثال

img {

    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */

     -moz-transform: rotate(30deg);  /* Firefox */

     -ms-transform: rotate(30deg);  /* IE 9 */

     transform: rotate(30deg);  /* Standard syntax */   

}
تابع ()rotate

تابع ()rotate

تابع ()scale

تابع scale() سبب می‌شود که ابعاد یک عنصر بزرگ و یا کوچک شود. این تابع می‌تواند به صورت scale(sx, sy) نوشته شود. در صورتی که هیچ مقداری برای هر کدام از آرگومان ها قید نشود، مقدار پیش فرض صفر در نظر گرفته می‌شود.

مثال

img {

    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */

    -moz-transform: scale(1.5);  /* Firefox */

     -ms-transform: scale(1.5);  /* IE 9 */

      transform: scale(1.5);  /* Modern Browsers */   

}

نوشتن این تابع به صورت scale(1.5) سبب می‌شود که عرض و ارتفاع یک عنصر به صورت همزمان یک و نیم برابر (150%) بزرگتر از مقدار اصلی آن شود. نوشتن این تابع به صورت )scale() یا scale(1,1) هیچ اثری بر روی یک عنصر ندارد و مقدارهای کمتر یک و بزرگتر صفر می‌تواند سبب کوچکتر شدن یک عنصر گردد.

تابع ()scale

تابع ()skew

تابه skew() به عنصر اجازه می‌دهد که بتواند در راستای محورهای X و Y بر حسب درجه وارد شده، خم شود. این تابع می‌تواند به صورت skew(ax, ay) نوشته شود. اگر ay تعریف نشده باشد، در آن صورت مقدار آن برابر با صفر در نظر گرفته می‌شود.

مثال

img {

    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */

       -moz-transform: skew(-40deg, 15deg);  /* Firefox */

        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */

            transform: skew(-40deg, 15deg);  /* Modern Browsers */   

}

 

در اینجا ما این تابع را به صورت skew(-40deg, 15deg) نوشته می‌شود، که به معنای آن است، عنصر مورد نظر ما به اندازه -40 درجه در راستای افق و 15 درجه در راستای عمود خم می‌شود

تابع ()skew

تابع ()skew

تابع ()matrix

تابع matrix()  این قابلیت را دارد که تمامی تغییر شکل های دو بعدی یعنی translate، rotate، scale و skew را در یک زمان انجام دهد. آن شش پارامتر را به عنوان آرگومان خود می‌پذیرد و به صورت martix(a,b,c,d,e,f) نوشته می‌شود. در بخش ادام ما هر کدام از تغییر شکل های دوبی که تابع ها می‌توانند در درون تابع بزرگ matrix() نشان دهند را آورده ایم.

  • translate(tx, ty)= matrix (1,0,0,1,tx,ty) : که در اینجا tx و ty مقدارهای جابجائی افقی و عمودی هستند.
  • rotate(a) = matrix ( cos(a), sin(a) , sin(a), cos(a), 0, 0) : که در اینجا مقدار a بر حسب درجه (deg) نشان داده می‌شود. شما می‌توانید مقدارهای sin(a) و -sin(a) را با همدیگر عوض کنید تا بتوانید جهت چرخش را معکوس کنید. حداکثر چرخشی که شما می‌توانید در اینجا وارد کنید مقدار 360 درجه است.
  • scale(sx, sy) = matrix (sx, 0,0,sy,0,0) : که در اینجا مقدارهای sx و sy مقدارهای مقیاس دهی افقی و عمودی هستند.
  • skew(ax, ay)= matrix(1, tan(ay), tan(ay), 1,0,0): که در اینجا مقدار ax و ay مقدارهای خم شدگی در راستای افقی و عمودی بودن هستند و بر حسب درجه تعیین می‌شود.

در مثال زیر ما یک تغییر شکل دوبعدی را با استفاده از تابع matrix() انجام داده ایم.

مثال

img {

    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */

       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */

        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */

            transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Standard syntax */

}

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

مثال

img {

    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */

       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */

        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */

            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Standard syntax */   

}

تابع های تغییر شکل دو بعدی

در جدول زیر خلاصه ای از کل تابع های تغییر شکل دوبعدی در زبان CSS آورده شده است.

تابع توضیحات
translate(tx,ty) این تابع سبب حرکت یک عنصر در راستای محور افقی (X) و محور عمودی (Y) می‌شود.
translateX(tx) این تابع فقط یک شکل را در راستای محور افق (X) حرکت می‌دهد.
translateY(ty) این تابع فقط یک شکل را در راستای محور عمودی (Y) حرکت می‌دهد.
rotate(a) این تابع سبب می‌شود که یک عنصر تحت زاویه خاصی در حول محور خود چرخش کند، محور چرخش (origin) نیز با استفاده از ویژگی transform-origin تعریف می‌شود.
scale(sx,sy) این تابع سبب می‌شود که عرض و ارتفاع یک عنصر به یک نسبت بزرگ و یا کوچک شود.  در صورتی که این تابع به شکل scale(1,1) نوشته شود، آن هیچ اثری بر روی عنصر مورد نظر ما ندارد.
scaleX(sx) این تابع سبب می‌شود که عریض و یا نازک شدن عنصر تنها در راستای محور افقی انجام گیرد و ارتفاع آن بدون تغییر می‌ماند.
scaleY(sy) این تابع سبب می‌شود که بلند و یا کوتاه شدن عنصر تنها در راستای محور عمودی انجام گیرد و عرض آن بدون تغییر باقی می‌ماند.
skew(ax,ay) این تابع سبب می‌شود که عنصر در راستای محور افقی و عمودی دچار خمش شود.
skewX(ax) این تابع یک عنصر را تنها در راستای محور x خم می‌کند.
skewY(ay) این تابع یک عنصر  را تنها در راستای محور y مقیاس دهی می‌کند.
matrix(n,n,n,n,n,n) این تابع تمامی مقدارهای تابع های بالا را به صورت شش آروگومان دریافت می‌کند و به یکباره تغییرات را بر روی یک عنصر انجام می‌دهد.

No votes yet.
Please wait...

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

منو اصلی

question