با استفاده از 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 پیکسل به سمت پایین حرکت کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
-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>
Thisdiv element ismoved50pixels tothe right,and100pixels down from its current position.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به کد بالا دقت کرده باشید می بینید که فرآیند جابجایی عناصر در css صورت گرفته و عنصر ما از قسمت اولیه ی خود که دقیقا زیر نوشته است، فاصله ی زیادی گرفته است. شما می توانید با تغییر کدها موقعیت آن را بیشتر تغییر دهید.
متد ()rotate
متد ()rotate
عنصر مورد نظرمان را میچرخاند، حالا یا در جهت عقربه های ساعت و یا خلاف آن (بسته به زاویه ای که ما به آن بدهیم).
در مثال زیر به کد گفته ایم که عنصر <div> را در حدود 20 درجه و در جهت عقربه های ساعت (مثبت بودن درجه) بچرخان:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 orcounter-clockwise.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isrotated clockwise20degrees.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال عنصر اولیه را حفظ کرده ایم تا متوجه تغییر شوید.
اگر می خواهید آن را خلاف جهت عقربه های ساعت بچرخانید باید از مقداری منفی برای درجه استفاده کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 orcounter-clockwise.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isrotated counter-clockwise with20degrees.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
متد ()scale
متد ()scale
عنصر ما را، بر اساس پارامترهای عرض و طولی که به آن می دهیم، از نظر اندازه بزرگ تر یا کوچک تر می کند.
در مثال زیر گفته ایم که عنصر <div> باید دو برابر عرض اولیه و سه برابر ارتفاع اولیه اش را بگیرد:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
margin:150px;
width:200px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
-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 ordecreases the size of an element.</p>
<div>
Thisdiv element istwo times of its original width,andthree times of its original height.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالا در مثال دیگری می گوییم طول و عرض عنصر ما را نصف کند:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
margin:150px;
width:200px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
-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 ordecreases the size of an element.</p>
<div>
Thisdiv element isdecreased tobe half of its original width andheight.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
متد ()skewX
متد ()skewX
عنصر را در محور x منحرف و کج می کند. در مثال زیر عنصر <div> را 20 درجه در محور x ها منحرف کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 theX-axis by the given angle.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isskewed20degrees along theX-axis.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
متد ()skewY
این متد دقیقا مانند متد قبلی است با این تفاوت که انحرف و کج شدگی در طول محور Y رخ می دهد. بنابراین همان مثال را دوباره به صورت 20 درجه اما در جهت محور Y منحرف کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 theY-axis by the given angle.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isskewed20degrees along theY-axis.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
متد ()skew
اگر بخواهید عنصر را در هر دو محور منحرف کنید باید از دستور ()skew
استفاده کنید.
در مثال زیر <div> را 20 درجه در محور x و 10 درجه در محور y منحرف کرده ایم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 intoagiven angle.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isskewed20degrees along theX-axis,and10degrees along theY-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())
به مثال زیر توجه کنید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
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 the2Dtransform methods into one.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv1">
Using the matrix()method.
</div>
<div id="myDiv2">
Another useof the matrix()method.
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدواریم این درس از مجموعه آموزش CSS پیشرفته برای شما مفید بوده باشد. در درس های بعدی هم همراه ما باشید.
منبع: روکسو