در درس قبل درباره تغییر شکل دوبعدی عناصر در CSS صحبت کردیم و هر آنچه در این زمینه لازم بود، شرح دادیم. امروز با مبحث تغییر شکل سه بعدی عناصر با شما عزیزان هستیم.
تغییر شکل سه بعدی عناصر
زبان CSS به شما اجازه می دهد که با استفاده از قابلیت transformation اشیاء مورد نظرتان را به شکل 3 بعدی تغییر دهید.
وضعیت پشتیبانی از این قابلیت در جدول زیر آمده است. توجه داشته باشید که اعداد این جدول نخستین نسخه ای از آن است که از قابلیت transform پشتیبانی کامل می کند و اعدادی که همراه پسوند هایی مانند -ms- و -webkit- و … هستند نشان دهنده ی اولین نسخه ای از مرورگر هستند که فقط با آن پسوند کار می کند:
| خصوصیت |
کروم |
edge |
فایرفاکس |
سافاری |
اپرا |
| transform |
36.0
12.0 -webkit-
|
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
| transform-origin (حالتی که سه مقدار می گیرد) |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
| transform-style |
36.0
12.0 -webkit- |
11.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
| perspective |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
| perspective-origin |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
| backface-visibility |
36.0
12.0 -webkit- |
10.0 |
16.0
10.0 -moz- |
9.0
4.0 -webkit- |
23.0
15.0 -webkit- |
متد ()rotateX
این متد عنصر مورد نظر ما را روی محور 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
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
#myDiv {
-webkit-transform:rotateX(150deg);/* Safari */
transform:rotateX(150deg);/* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotateX()Method</h1>
<p>The rotateX()method rotates an element around itsX-axis atagiven degree.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isrotated150degrees.
</div>
<p><b>Note:</b>Internet Explorer9(andearlier versions)does notsupport the rotateX()method.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هشدار: این قابلیت (یعنی rotateX) در Internet Explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.
متد ()rotateY
این متد، عنصر مورد نظر ما را روی محور 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
34
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
#myDiv {
-webkit-transform:rotateY(150deg);/* Safari */
transform:rotateY(150deg);/* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotateY()Method</h1>
<p>The rotateY()method rotates an element around itsY-axis atagiven degree.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isrotated150degrees.
</div>
<p><b>Note:</b>Internet Explorer9(andearlier versions)does notsupport the rotateY()method.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
متد ()rotateZ
این متد، عنصر مورد نظر ما را در محور Z میچرخاند. کد زیر مثال خوبی از این چرخش است:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div {
width:300px;
height:100px;
background-color:yellow;
border:1pxsolidblack;
}
#myDiv {
-webkit-transform:rotateZ(90deg);/* Safari */
transform:rotateZ(90deg);/* Standard syntax */
}
</style>
</head>
<body>
<h1>The rotateZ()Method</h1>
<p>The rotateZ()method rotates an element around itsZ-axis atagiven degree.</p>
<div>
Thisanormal div element.
</div>
<div id="myDiv">
Thisdiv element isrotated90degrees.
</div>
<p><b>Note:</b>Internet Explorer9(andearlier versions)does notsupport the rotateZ()method.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
هشدار: این قابلیت در Internet Explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.
دستور perspective در css
این دستور (یعنی perspective) در لغت به معنی «زاویه دید» یا همان پرسپکتیو در فارسی است و همانطور که حدس میزنید،
perspective در css مسئول تعیین زاویه دید است. به مثال زیر توجه کنید:
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
44
45
46
47
48
49
50
51
52
53
54
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#div1 {
position:relative;
height:150px;
width:150px;
margin-left:60px;
border:1pxsolidblue;
-webkit-perspective:100px;/* Safari 4-8 */
perspective:100px;
}
#div2, #div4 {
padding:50px;
position:absolute;
border:1pxsolidblack;
background-color:red;
background:rgba(100,100,100,0.5);
-webkit-transform-style:preserve-3d;/* Safari 3-8 */
-webkit-transform:rotateX(45deg);/* Safari 3-8 */
transform-style:preserve-3d;
transform:rotateX(45deg);
}
#div3 {
position:relative;
height:150px;
width:150px;
margin-left:60px;
border:1pxsolidblue;
-webkit-perspective:none;/* Safari 4-8 */
perspective:none;
</style>
</head>
<body>
<h1>The perspective Property</h1>
<h2>perspective:100px:</h2>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<h2>perspective:none:</h2>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>
<p><strong>Note:</strong>The perspective propertyisnotsupported inIE9 andearlier versions.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در مثال بالا به Div2 و Div1 دستور زاویه دید داده ایم و همانطور که می بینید حالت پرسپکتیو در آن ها ایجاد شده است اما در Div3 و Div4 هیچ تغییری نمی بینیم. البته این قابلیت نیز در IE9 و نسخه های قبلی آن پشتیبانی نمی شود. البته توجه داشته باشید که هنگام کار با perspective این عنصر فرزند است که افکت پرسپکتیو را دریافت می کند و نه خود آن عنصر.
اگر دوست دارید به صورت دستی و خودتان تعیین کنید که زاویه ی دید از چه منطقه ای باشد باید از دستور perspective-origin استفاده کنید:
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<!DOCTYPEhtml>
<html>
<head>
<style>
#div1 {
position:relative;
height:150px;
width:150px;
margin-left:60px;
border:1pxsolidblue;
-webkit-perspective:100px;/* Safari 4-8 */
-webkit-perspective-origin:left;/* Safari 4-8 */
perspective:100px;
perspective-origin:left;
}
#div2, #div4, #div6 {
padding:50px;
position:absolute;
border:1pxsolidblack;
background-color:red;
background:rgba(100,100,100,0.5);
-webkit-transform-style:preserve-3d;/* Safari 3-8 */
-webkit-transform:rotateX(45deg);/* Safari 3-8 */
transform-style:preserve-3d;
transform:rotateX(45deg);
}
#div3 {
position:relative;
height:150px;
width:150px;
margin-left:60px;
border:1pxsolidblue;
-webkit-perspective:100px;/* Safari 4-8 */
-webkit-perspective-origin:bottomright;/* Safari 4-8 */
perspective:100px;
perspective-origin:bottomright;
}
#div5 {
position:relative;
height:150px;
width:150px;
margin-left:60px;
border:1pxsolidblue;
-webkit-perspective:100px;/* Safari 4-8 */
-webkit-perspective-origin:-90%;/* Safari 4-8 */
perspective:100px;
perspective-origin:-90%;
}
</style>
</head>
<body>
<h1>The perspective-origin Property</h1>
<h2>perspective-origin:left:</h2>
<div id="div1">DIV1
<div id="div2">DIV2</div>
</div>
<h2>perspective-origin:bottom right:</h2>
<div id="div3">DIV3
<div id="div4">DIV4</div>
</div>
<h2>perspective-origin:-90%:</h2>
<div id="div5">DIV5
<div id="div6">DIV6</div>
</div>
<p><strong>Note:</strong>The perspective-origin propertyisnotsupported inInternet Explorer9andearlier versions.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
دستور backface-visibility در css
دستور backface-visibility مشخص می کند که هنگام چرخش یک عنصر آیا اشکال یا نوشته های پشت آن برای کاربر قابل مشاهده باشد یا خیر. برای اینکه متوجه این مفهوم شوید، به مثال زیر نگاه کنید:
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
44
45
46
47
48
49
50
51
|
<!DOCTYPEhtml>
<html>
<head>
<style>
div#div1 {
-webkit-backface-visibility:visible; /* Chrome, Safari, Opera */
backface-visibility:visible;
}
div#div1 {
width:100px;
height:100px;
background:red;
position:relative;
border:1pxsolid#000000;
-webkit-animation:mymove3sinfinite; /* Chrome, Safari, Opera */
animation:mymove3sinfinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
@keyframes mymove {
from {transform:rotateY(0deg);}
to {transform:rotateY(360deg);}
}
</style>
<script>
functioncheckBackface(){
if(document.getElementById("bf").checked==true){
document.getElementById('div1').style.backfaceVisibility="hidden";
document.getElementById('div1').style.webkitBackfaceVisibility="hidden";
}else{
document.getElementById('div1').style.backfaceVisibility="visible";
document.getElementById('div1').style.webkitBackfaceVisibility="visible";
}
}
</script>
</head>
<body>
<div id="div1">HELLO</div>
<pdir='rtl'>باتیکزدنمربعپایینمتوجهتفاوتوجودوعدموجوداینقابلیتخواهیدشد:</p>
<pdir='rtl'>قسمتپشتیراپنهانکن:<input id="bf"type="checkbox"onchange="checkBackface()"></p>
<pdir='rtl'><strong>هشدار:</strong>اینقابلیتدرInternet Explorer9ونسخههایقبلیآنپشتیبانینمیشوند.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به زبان ساده بگوییم، در هنگام استفاده می توانید به این شکل عمل کنید:
|
|
#div1 {
backface-visibility:hidden;
}
#div2 {
backface-visibility:visible;
}
|
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟