انتخاب رنگ سبز انتخاب رنگ آبی انتخاب رنگ قرمز

2D Transfrom یا تبدیل دو بعدی در CSS

2D Transfroms

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


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

فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .
اینترنت اکسپلورر 9 برای این ویژگی نیاز به پیشوند -ms- دارد .
اوپرا برای این ویژگی نیاز به پیشوند -o- دارد .
تبدیل های دو بعدی در CSS3

شما در این درس متد های تبدیل دو بعدی را یاد میگیرید :
  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()
شما تبدیل سه بعدی را نیز در درس بعدی یاد میگیرید .
نمونه ( چرخش 30 درجه )
Internet ExplorerFirefoxChromeSafariOpera
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 */
}
متد translate()

Translate

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

نمونه (translate())
Internet ExplorerFirefoxChromeSafariOpera
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) المنت را از سمت چپ 50 پیکسل و از سمت بالا 100 پیکسل جابجا می کند.
متد rotate()

Rotate

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

نمونه (rotate())
Internet ExplorerFirefoxChromeSafariOpera
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) المنت را 30 درجه در جهت عقربه های ساعت می چرخاند .
متد scale()

Scale

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

نمونه (rotate())
Internet ExplorerFirefoxChromeSafariOpera
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) یعنی عرض آن دو برابر اندازه اصلی و ارتفاع آن 4 برابر شود .
متد skew()

Skew

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

نمونه (rotate())
Internet ExplorerFirefoxChromeSafariOpera
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) المنت را 30 درجه حول محور X و 20 درجه حول محور Y می چرخاند .
متد matrix()

Rotate
متد matrix() دربردارنده تمامی تبدیل های دو بعدی است .
متد matrix دارای شش پارامتر است ، حاوی توابع ریاضی ، که به شما اجازه میدهد بچرخانید ، بزرگ یا کوچک کنید ، حرکت دهید ، یا آن را کج (خم) کنید . نحوه چرخاندن المنت div با استفاده از متد ماتریکس :
نمونه (چرخاندن المنت div با استفاده از متد ماتریکس)
Internet ExplorerFirefoxChromeSafariOpera
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 */
}
شرح دادن ویژگی های فوق

برای دیدن صفحه مخصوص هر یک از ویژگی های فوق روی نام آن ها کلیک کنید :

وی بی ایران در Facebook

صفحه رسمی وی بی ایران در فیس بوک قصد دارد تا بهترین مطالب را به Stream شما ارسال کند . اگر میخواهید :
  • استایل های جدید
  • هک های جدید
  • مقاله های محبوب
  • خبر های جدید ویبولتین
  • و ..
برای شما ارسال شود ، هم اکنون پیج ما را لایک کنید .
برای ورود به صفحه رسمی وی بی ایران روی آیکن فیس بوک کلیک کنید .