دستورهای چرخش و تغییر اندازه و جابجایی عناصر در css

تغییر شکل (transform) دو بعدی عناصر

با استفاده از CSS می توانیم عناصر HTML را در حالت های مختلف تغییر شکل دهیم. به طور مثال آن ها را بچرخانیم و یا کوچک و بزرگ کنیم یا هر تغییر شکلی که در دو بعد انجام بگیرد (البته تغییرات سه بعدی را نیز داریم که در مقاله ی بعدی مورد بحث قرار خواهیم داد).

وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول، نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوندهایی مانند -ms- و -webkit- و ... هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:

خصوصیت

کروم

edge

فایرفاکس

سافاری

اپرا

transform

36.0

4.0 -webkit-

10.0
9.0 -ms-

16.0
3.5 -moz-

9.0
3.2 -webkit-

23.0
15.0 -webkit-
12.1
10.5 -o-

transform-origin (حالتی که دو مقدار می گیرد)

36.0
4.0 -webkit-

10.0
9.0 -ms-

16.0
3.5 -moz-

9.0
3.2 -webkit-

23.0
15.0 -webkit-
12.1
10.5 -o-

قابلیت های معروف برای تغییر دوبعدی عناصر از این قرارند:

translate
rotate
scale
skewX
skewY
matrix

می خواهیم تک تک آن ها را بررسی کنیم.

متد ()translate

متد ()translate برای جابجایی عناصر در css بکار می رود و عنصر مورد نظر را از مکان فعلی خود به مکان دیگری منتقل می کند.

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

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: translate(50px,100px); /* IE 9 */
  -webkit-transform: translate(50px,100px); /* Safari */
  transform: translate(50px,100px); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The translate() Method</h1>
<p>The translate() method moves an element from its current position:</p>

<div>
This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اگر به کد بالا دقت کرده باشید می بینید که فرآیند جابجایی عناصر در css صورت گرفته و عنصر ما از قسمت اولیه ی خود که دقیقا زیر نوشته است، فاصله ی زیادی گرفته است. شما می توانید با تغییر کدها موقعیت آن را بیشتر تغییر دهید.

متد ()rotate

متد ()rotate عنصر مورد نظرمان را میچرخاند، حالا یا در جهت عقربه های ساعت و یا خلاف آن (بسته به زاویه ای که ما به آن بدهیم).

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */
  transform: rotate(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

در این مثال عنصر اولیه را حفظ کرده ایم تا متوجه تغییر شوید.

اگر می خواهید آن را خلاف جهت عقربه های ساعت بچرخانید باید از مقداری منفی برای درجه استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: rotate(-20deg); /* IE 9 */
  -webkit-transform: rotate(-20deg); /* Safari */
  transform: rotate(-20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is rotated counter-clockwise with 20 degrees.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

متد ()scale

متد ()scale عنصر ما را، بر اساس پارامترهای عرض و طولی که به آن می دهیم، از نظر اندازه بزرگ تر یا کوچک تر می کند.

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(2,3); /* IE 9 */
  -webkit-transform: scale(2,3); /* Safari */
  transform: scale(2,3); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is two times of its original width, and three times of its original height.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

حالا در مثال دیگری می گوییم طول و عرض عنصر ما را نصف کند:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 150px;
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  -ms-transform: scale(0.5,0.5); /* IE 9 */
  -webkit-transform: scale(0.5,0.5); /* Safari */
  transform: scale(0.5,0.5); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The scale() Method</h1>
<p>The scale() method increases or decreases the size of an element.</p>

<div>
This div element is decreased to be half of its original width and height.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

متد ()skewX

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skewX(20deg); /* IE 9 */
  -webkit-transform: skewX(20deg); /* Safari */
  transform: skewX(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skewX() Method</h1>
<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>

مشاهده ی خروجی در JSBin

متد ()skewY

این متد دقیقا مانند متد قبلی است با این تفاوت که انحرف و کج شدگی در طول محور Y رخ می دهد. بنابراین همان مثال را دوباره به صورت 20 درجه اما در جهت محور Y منحرف کرده ایم:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skewY(20deg); /* IE 9 */
  -webkit-transform: skewY(20deg); /* Safari */
  transform: skewY(20deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skewY() Method</h1>
<p>The skewY() method skews an element along the Y-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 Y-axis.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

متد ()skew

اگر بخواهید عنصر را در هر دو محور منحرف کنید باید از دستور ()skew استفاده کنید.

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

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv {
  -ms-transform: skew(20deg,10deg); /* IE 9 */
  -webkit-transform: skew(20deg,10deg); /* Safari */
  transform: skew(20deg,10deg); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The skew() Method</h1>
<p>The skew() method skews an element into a given angle.</p>

<div>
This a normal div element.
</div>

<div id="myDiv">
This div element is skewed 20 degrees along the X-axis, and 10 degrees along the Y-axis.
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: اگر مقدار پارامتر دوم را ندهید، مقدار پیش فرض آن برابر صفر خواهد بود.

بنابراین اگر کدی به شکل زیر داشته باشیم:

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

بدین معنی است که <div> به مقدار 20 درجه در محور X ها منحرف شده و تغییر دیگری نداشته است.

متد ()matrix

متد()matrix تمام تغییرات دو بعدی را در یک تغییر ترکیب می کند! این متد 6 پارامتر می گیرد که توابع ریاضی هستند و به شما اجازه می دهند که عنصری را rotate یا scale یا translate یا skew کنید. در واقع این دستور به شکل کامل به همراه پارامتر هایش به این شرح است:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#myDiv1 {
  -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */
  -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */
  transform: matrix(1, -0.3, 0, 1, 0, 0); /* Standard syntax */
}

div#myDiv2 {
  -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); /* IE 9 */
  -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0); /* Safari */
  transform: matrix(1, 0, 0.5, 1, 150, 0); /* Standard syntax */
}
</style>
</head>
<body>

<h1>The matrix() Method</h1>
<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>

مشاهده ی خروجی در JSBin

امیدواریم این درس از مجموعه آموزش CSS پیشرفته برای شما مفید بوده باشد. در درس های بعدی هم همراه ما باشید.