شما اینجا هستید

تغییر شکلهای CSS3 به ما توانایی تغییر موقعیت، چرخاندن، تغییر سایز و کج کردن عناصر را میدهد.

تغییر شکل افکتی است که از طریق آن میتوان شکل ظاهری، اندازه و موقعیت یک عنصر را تغییر داد.

CSS3 هم از تغییر شکلهای 2 بعدی و هم از تغییر شکلهای 3 بعدی پشتیبانی میکند.

در این درس در مورد روشهای تغییر شکل 2 بعدی زیر خواهید آموخت:

  • ()translate
  • ()rotate
  • ()scale
  • ()skewX
  • ()skewY
  • ()matrix

تغییر شکل های 3 بعدی را در درس بعدی آموزش میدهیم.

روش ()translate

روش ()translate باعث حرکت یک عنصر بر طبق پارامترهایی که برای محور x و محور y گرفته است از جای فعلی میشود.

مثال زیر عنصر <div> را از مکان فعلی 50 پیکسل به راست و 100 پیکسل به پایین میبرد:

<html>

<head>

<style>

div {

    width: 300px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

    transform: translate(50px,100px);

}


</style>

</head>

<body>


<div>

The translate() method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position.

</div>


</body>

</html>

 

چرخاندن - ()rotate

 

متد ()rotate عناصر را بر طبق زاویه ای که به آن میدهیم به صورت ساعتگرد یا برعکس میچرخاند.

مثال زیر عنصر <div> را 20 درجه به صورت ساعت گرد میچرخاند:

div {
    transform: rotate(20deg);
}

 

تغییر اندازه - ()scale

 

متد ()scale سایز یک عنصر را بر طبق پارامترهایی که به متد داده ایم کاهش یا افزایش میدهد.

مثال زیر اندازه عنصر <div> را نسبت به پهنای اصلی آن دو برابر و نسبت به ارتفاع اصلی آن سه برابر بزگتر میکند:

div {

    transform: scale(2,3);
}

با توجه به مثال متوجه میشویم که پارامتر اول برای پهنا و پارامتر دوم برای ارتفاع استفاده میشود.

مثال زیر اندازه ارتفاع و پهنای عنصر <div> را نصف اندازه اصلی میکند:

div {
    transform: scale(0.5,0.5);
}

 

متد ()skewX

 

متد ()skewX یک عنصر را در امتداد محور x بر طبق زاویه ای که به آن داده ایم کج میکند.

مثال زیر عنصر <div> را 20 درجه در امتداد محور x کج میکند:

<head>

<style>

div {

    width: 300px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

}


div#myDiv {

    transform: skewX(20deg);

}


</style>

</head>

<body>


<p>The skewX() method skews an element along the X-axis by the given angle.</p>


<div>

This a normal div element.

</div>


<div id="myDiv">

This div element is skewed 20 degrees along the X-axis.

</div>


</body>

</html>

 

متد ()skewY

 

متد ()skewY یک عنصر را در امتداد محور y بر طبق زاویه ای که به آن داده ایم کج میکند.

مثال زیر عنصر <div> را 20 درجه در امتداد محور y کج میکند:

div {
    transform: skewY(20deg);
}

 

متد ()skew

 

متد ()skew یک عنصر را در امتداد محور x و محور y بر طبق زاویه ای که به آن داده ایم کج میکند.

مثال زیر عنصر <div> را 20 درجه در امتداد محور x و 10 درجه در امتداد محور y کج میکند:

div {
   transform: skew(20deg, 10deg);
}

 

متد ()matrix

 

متد ()matrix همه تغییر شکلهای دو بعدی را در یک متد با هم ترکیب میکند. این متد دارای شش پارامتر میباشد، که میتوانید عناصر را بچرخانید، تغییر اندازه بدهید، حرکت بدهید و کج بکنید:

<html>

<head>

<style>

div {

    width: 300px;

    height: 100px;

    background-color: yellow;

    border: 1px solid black;

}


div#myDiv1 {

    transform: matrix(1, -0.3, 0, 1, 0, 0);

}


div#myDiv2 {

    transform: matrix(1, 0, 0.5, 1, 150, 0);

}


</style>

</head>

<body>


<p>The matrix() method combines all the 2D transform methods into one.</p>


<div>

This a normal div element.

</div>


<div id="myDiv1">

Using the matrix() method.

</div>


<div id="myDiv2">

Another use of the matrix() method.

</div>


</body>

</html>

 

افزودن دیدگاه جدید

دیدگاه

  • تگ‌های HTML مجاز: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <img>
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.

Plain text

  • تگ‌های HTML مجاز نیستند.
  • نشانی صفحه‌ها وب و پست الکترونیک بصورت خودکار به پیوند تبدیل می‌شوند.
  • خطوط و پاراگراف‌ها بطور خودکار اعمال می‌شوند.
كد امنيتي
این پرسش برای جلوگیری از ارسال اسپمهای اتوماتیک است.