تبدیل دو بعدی در Css3

در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید

 2d-transformیکی دیگر از ویژگیهایی که در نسخه قدیمی Css3 وجود نداشت تبدیل دو بعدی بود . با استفاده از این ویژگی می توانیم اجزای مورد نظرمان را در جهت دلخواه بچرخانیم ، بزرگ یا کوچک کنیم یا کمی آن را خم نمائیم . 
این ویژگی در اینترنت اکسپلورر نسخه 10 ، موزیلا و اوپرا پشتیبانی می شود  .
کروم و سافاری برای این ویژگی نیاز به پیشوند -webkit- دارد .
اینترنت اکسپلورر 9 برای این ویژگی نیاز به پیشوند -ms- دارد . 

 2D Transforms دارای ویژگیهای زیر می باشد که در ادامه هر کدام را به صورت کامل توضیح میدهم . 

 

translate()
rotate()
scale()
skew()
matrix()

 

 آموزش متد translate در css3
با استفاده از متد translate اجزا مورد نظر شما از مکان فعلی خود با استفاده از پارامترهایی که به آن برای چپ محور X  و  بالا محور Y داده می شود حرکت می کند .
خط اول کد اصلی می باشد و دو خط دیگر همانطور که مشاهده می کنید برای اینترنت اکسپلورر 9 و دو مرورگر سافاری و کروم مورد استفاده قرار می گیرد .

 

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

 

 

transform

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 

 

transform-1

 من مقدار عدد translate را کم و زیاد میکنم تا بیشتر با این متد آشنا شوید . 

 

div
{
transform: translate(120px,10px);
-ms-transform: translate(120px,10px); /* IE 9 */
-webkit-transform: translate(120px,10px); /* Safari and Chrome */
}

 

 transform-2

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)

 


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
transform:translate(120px,10px);
-ms-transform:translate(120px,10px); /* IE 9 */
-webkit-transform:translate(120px,10px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 

 

 آموزش متد Rotate در Css3
با استفاده از متد rotate() با دادن مقادیر به صورت 'درجه' المنت شما میتواند در جهت عقربه های ساعت بچرخد . مقادیر منفی مجاز می باشد و المنت در خلاف عقربه های ساعت می چرخد.   هرچه مقدار 0deg را تغییر بدهید ، با توجه به عدد وارد شده کادر در جهت عقربه های ساعت یا برخلاف آن می چرخد .


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

 

rotate-1

 

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 



 

rotate-2

 آموزش متد Scale در Css3

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


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

 


 

scale 

مقدار 2,4 یعنی عرض شکل دوم ، دوبرابر اندازه اصلی و ارتفاع شکل دوم ، چهار برابر باشد .

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
margin:100px;
transform:scale(2,4);
-ms-transform:scale(2,4); /* IE 9 */
-webkit-transform:scale(2,4); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 



 

scale-1

 آموزش متد Skew در Css3 

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


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

 

 

skew

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید)


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 

 

 skew1

 آموزش متد matrix در Css3

متد 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 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

 

 

matrix

 کد اصلی قسمت بالا . (در یک فایل نوت پد کپی کرده و با فرمت html.ذخیره کنید) 

 


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Untitled Document</title>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
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 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id='div2'>Hello. This is a DIV element.</div>
</body>
</html>

 

آخرین بروز رسانیپنج شنبه, 31 ارديبهشت 1394 22:54

نوشتن دیدگاه

تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا