برچسب های HTML
2D Transfroms
با استفاده از تبدیل دو بعدی در سی اس اس 3 ما میتوانیم اجزای خود را بچرخانیم ، خم کنیم ، بزرگ کنید یا بکشیم .
با استفاده از تبدیل دو بعدی در سی اس اس 3 ما میتوانیم اجزای خود را بچرخانیم ، خم کنیم ، بزرگ کنید یا بکشیم .
پشتیبانی مرورگر ها
فایرفاکس برای این ویژگی نیاز به پیشوند -moz- دارد .
سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .
اینترنت اکسپلورر 9 برای این ویژگی نیاز به پیشوند -ms- دارد .
اوپرا برای این ویژگی نیاز به پیشوند -o- دارد .
تبدیل های دو بعدی در CSS3
شما در این درس متد های تبدیل دو بعدی را یاد میگیرید :
- translate()
- rotate()
- scale()
- skew()
- matrix()
با استفاده از متد translate() المنت مورد نظر شما از مکان فعلی خود با استفاده از پارامتر هایی که به آن برای چپ (محور X) و بالا (محور Y) داده میشود حرکت میکند .
نمونه
(translate())
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 */
}
{
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 */
}
با استفاده از متد 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 */
}
{
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 */
}
با استفاده از scale() میتوانید اندازه یک المنت را زیاد و کم کنید . مقدار آن بستگی به پارامتر هایی دارد که به عنوان عرض ( محور X ) و عرض ( محور Y ) به آن می دهید :
نمونه (rotate())
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 */
}
{
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 */
}
با متد skew() شما میتوانید المنت را با دادن درجه بچرخانید ، میزان چرخش بستگی به پارامتر های عمودی ( محور X ) و افقی ( محور Y ) دارد .
نمونه (rotate())
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 */
}
{
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 */
}
متد 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 */
اضافه کردن فونت در سی اس اس 3 
