شما می توانید عناصر داخل صفحه را با استفاده از تبدیل دو بعدی و سه بعدی، تبدیل کنید.
تبدیل دو بعدی (2D Transforms) در CSS3 به شما این امکان را می دهد که عناصر را حرکت دهید، بچرخانید، خم کنید، تغییر اندازه دهید و یا بکشید.
پشتیبانی مرورگرها
|
Property |
|
|
|
|
|
|
transform |
10.0
9.0 -ms- |
36.0
4.0 -webkit- |
16.0
3.5 -moz- |
3.2 -webkit- |
23.0
15.0 -webkit-
12.1
10.5 -o- |
transform-origin
(two-value syntax) |
10.0
9.0 -ms- |
36.0
4.0 -webkit- |
16.0
3.5 -moz- |
3.2 -webkit- |
23.0
15.0 -webkit-
12.1
10.5 -o- |
مرورگرهای Internet Explorer 10, Firefox, Opera خاصیت transform را پشتیانی می کنند.
مرورگرهای Chrome and Safari به پیشوند -webkit- نیاز دارند.
نکته: Internet Explorer 9 به پیشوند -ms- نیاز دارد.
در این فصل شما با متدهای تبدیل دو بعدی زیر آشنا می شوید :
-
()translate
-
()rotate
-
()scale
-
()skewX
-
()skewY
-
()matrix
نکته : در فصل بعد با تبدیل سه بعدی آشنا خواهید شد.
متد ()translate در CSS3
متد ()translate عنصر را از موقعیت فعلی خود حرکت می دهد. میزان این حرکت به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- فاصله از چپ 2- فاصله از بالا )
مثال زیر عنصر <div> را نسبت به موقعیت فعلی 50 پیکسل به سمت راست و 100 پیکسل به سمت پایین حرکت می دهد :
div {
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari */
transform: translate(50px,100px);
}
متد ()rotateدر CSS3
متد ()rotate عناصر را در جهت عقربه های ساعت ویا بالعکس می چرخاند.
در مثال زیر عنصر <div> 20 درجه در جهت عقربه های ساعت چرخانده می شود :
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
مقادیر منفی، عنصر را در جهت عکس عقربه های ساعت می چرخاند.
در مثال زیر عنصر <div> 20 درجه در خلاف جهت عقربه های ساعت چرخانده می شود :
div {
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Safari */
transform: rotate(-20deg);
}
متد ()scale در CSS3
با استفاده از متد ()scale، می توان اندازه و یا مقیاس عناصر را افزایش و یا کاهش داد، میزان این تغییر به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- میزان تغییر عرض 2- میزان تغییر ارتفاع)
در مثال زیر، عرض عنصر <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);
}
متد ()skewX در CSS3
با استفاده از متد ()skewX ، می توان یک عنصر را در جهت محور Xها (افقی) کج نمود.
در مثال زیر عنصر <div>، 20 درجه در جهت محور Xها منحرف می شود.
div {
-ms-transform: skewX(20deg); /* IE 9 */
-webkit-transform: skewX(20deg); /* Safari */
transform: skewX(20deg);
}
متد ()skewY در CSS3
با استفاده از متد ()skewY ، می توان یک عنصر را در جهت محور Yها (عمودی) کج نمود.
در مثال زیر عنصر <div>، 20 درجه در جهت محور Yها منحرف می شود.
div {
-ms-transform: skewY(20deg); /* IE 9 */
-webkit-transform: skewY(20deg); /* Safari */
transform: skewY(20deg);
}
متد ()skew در CSS3
با استفاده از متد ()skew، می توان عناصر را کج کرد، میزان این تغییر به پارامترهایی که شما تنظیم می کنید، بستگی دارد. (1- میزان تغییر در جهت افقی 2- میزان تغییر در جهت عمودی)
در مثال زیر، عنصر <div> به صورت افقی 20 درجه و به صورت عمودی 10 درجه، کج شده است:
div {
-ms-transform: skew(20deg, 10deg); /* IE 9 */
-webkit-transform: skew(20deg, 10deg); /* Safari */
transform: skew(20deg, 10deg);
}
متد ()matrix در CSS3
متد ()matrix شامل تمام متدهای تبدیل دو بعدی است.
متد ()matrix دارای شش پارامتر است، حاوی توابع ریاضی، که به شما اجازه می دهد عناصر را بچرخانید (rotate)، بزرگ یا کوچک کنید (scale)، حرکت دهید (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);
}
خاصیت های تبدیل در CSS3
|
خاصیت |
توضیحات |
|
transform |
برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود |
|
transform-origin |
به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید |
متدهای تبدیل دو بعدی
|
متد |
توضیحات |
|
matrix(n,n,n,n,n,n) |
تمامی تبدیل های دو بعدی را دربردارد |
|
translate(x,y) |
حرکت می دهد Y و X عنصر را در جهت محور |
|
translateX(n) |
حرکت می دهد X عنصر را در جهت محور |
|
translateY(n) |
حرکت می دهد Y عنصر را در جهت محور |
|
scale(x,y) |
عرض و ارتفاع عنصر را تغییر می دهد |
|
scaleX(n) |
عرض عنصر را تغییر می دهد |
|
scaleY(n) |
ارتفاع عنصر را تغییر می دهد |
|
rotate(angle) |
(عنصر را در جهت عقربه های ساعت می چرخاند. (پارامتر منفی، عنصر را در خلاف عقربه ها می چرخاند |
|
skew(x-angle,y-angle) |
کج می کند Y و X عنصر را در جهت محور |
|
skewX(angle) |
کج می کند X عنصر را در جهت محور |
|
skewY(angle) |
کج می کند Y عنصر را در جهت محور |