آموزش css – تبدیل دو بعدی در css3 یا Transfroms

شما در سی اس اس با متد تبدیل دو بعدی در css3 می توانید عناصر اچ تی ام ال خود را بچرخانید، خم کنید، بزرگ و کوچک کنید و یا بکشید.

آموزش css – تبدیل دو بعدی در css3 یا Transfroms

و همچنین شما با خواندن این مطلب می توانید با پشتیبانی مرورگرها از ویژگی Transform آشنا شوید. به عنوان مثال :

فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد.

سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد.

اینترنت اکسپلورر ۹ برای این ویژگی نیاز به پیشوند -ms- دارد.

اوپرا برای این ویژگی نیاز به پیشوند -o- دارد.

()translate : با استفاده از متد ()translate المنت مورد نظر شما از مکان فعلی خود با استفاده از پارامتر ھایی که به آن برای چپ (محور x ) و بالا (محور y ) داده میشود حرکت میکند .

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

مقدار (translate(50px,100px المنت را از سمت چپ ۵۰ پیکسل و از سمت بالا ۱۰۰ پیکسل جابجا می کند.

()rotate : با دادن مقادیر به صورت “درجه” المنت شما میتواند در جھت عقربه ھای ساعت بچرخد . مقادیر منفی مجاز ()rotate با استفاده از متد می باشد و المنت در خلاف عقربه ھای ساعت می چرخد.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

مقدار (rotate(30deg المنت را ۳۰ درجه در جھت عقربه ھای ساعت می چرخاند .

()scale : با استفاده از ()scale میتوانید اندازه یک المنت را زیاد و کم کنید . مقدار آن بستگی به پارامتر ھایی دارد که به عنوان عرض (محور x ) و عرض (محور y ) به آن می دھید.

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

مقدار (scale(2,4 یعنی عرض آن دو برابر اندازه اصلی و ارتفاع آن ۴ برابر شود .

()skew : با متد ()skew شما میتوانید المنت را با دادن درجه بچرخانید ، میزان چرخش بستگی به پارامتر ھای عمودی (محور x ) و افقی (محور y ) دارد.

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

مقدار (skew(30deg,20deg المنت را ۳۰ درجه حول محور x و ۲۰ درجه حول محور y می چرخاند.

()matrix : متد ()matrix دربردارنده تمامی تبدیل ھای دو بعدی است . متد ()matrix دارای شش پارامتر است ، حاوی توابع ریاضی ، که به شما اجازه میدھد بچرخانید ، بزرگ یا کوچک کنید ، حرکت دھید ، یا آن را کج (خم) کنید . نحوه چرخاندن المنت div با استفاده از متد ماتریکس :

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 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}