CSS 3D Transforms
فهرست مطالب
CSS 3D Transforms
CSS ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯼﺪﻌﺑ ﻪﺳ ﯼﺎﻫ ﻞﯾﺪﺒﺗ ﺯﺍ ﻦﯿﻨﭽﻤﻫ.
ﺪﯿﻨﯿﺒﺑ ﺍﺭ ﯼﺪﻌﺑﻭﺩ ﻦﯿﺑ ﺕﻭﺎﻔﺗ ﺎﺗ ﺪﯿﻫﺩ ﺭﺍﺮﻗ ﺮﯾﺯ ﺮﺻﺎﻨﻋ ﯼﻭﺭ ﺍﺭ ﺱﻭﺎﻣ
:ﺪﯾﻮﺷ ﯽﻣ ﺎﻨﺷﺁ ﺮﯾﺯ CSS ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﺎﺑ ﻞﺼﻓ ﻦﯾﺍ ﺭﺩ
transform
ﺮﮔﺭﻭﺮﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ
.ﺪﻨﮐ ﯽﻣ ﯽﻧﺎﺒﯿﺘﺸﭘ ﯽﮔﮋﯾﻭ ﺯﺍ ﻞﻣﺎﮐ ﺭﻮﻃ ﻪﺑ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﺮﮔﺭﻭﺮﻣ ﻪﺨﺴﻧ ﻦﯿﻟﻭﺍ ﻝﻭﺪﺟ
| Property | |||||
|---|---|---|---|---|---|
| transform | 36.0 |
10.0 |
16.0 |
9.0 |
23.0 |
CSS 3D Transforms Methods
ﺪﯿﻨﮐ ﻩﺩﺎﻔﺘﺳﺍ ﺪﯿﻧﺍﻮﺗ ﯽﻣ :ﺪﻧﺎﺧﺮﭼ ﯽﻣ ﻦﯿﻌﻣ ﻪﺟﺭﺩ ﮏﯾ ﺭﺩ ﺩﻮﺧ X ﺭﻮﺤﻣ ﻝﻮﺣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻧﺎﺧﺮﭼ ﯽﻣ ﻦﯿﻌﻣ ﻪﺟﺭﺩ ﮏﯾ ﺭﺩ ﺩﻮﺧ Y ﺭﻮﺤﻣ ﻝﻮﺣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻧﺎﺧﺮﭼ ﯽﻣ ﯽﻨﯿﻌﻣ ﻪﺟﺭﺩ ﺭﺩ ﺩﻮﺧ Z ﺭﻮﺤﻣ ﻝﻮﺣ ﺍﺭ ﺮﺼﻨﻋ ﮏﯾ → ﺪﯿﻨﮐ ﻥﺎﺤﺘﻣﺍ ﺍﺭ ﻥﺁ ﻥﺎﺗﺩﻮﺧ :ﺪﻨﮐ ﯽﻣ ﺖﺳﺮﻬﻓ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻞﯾﺪﺒﺗ ﯼﺎﻫ ﯽﮔﮋﯾﻭ ﻡﺎﻤﺗ ﺮﯾﺯ ﻝﻭﺪﺟ ﺪﻨﮐ ﯽﻣ ﻝﺎﻤﻋﺍ ﺮﺼﻨﻋ ﮏﯾ ﻪﺑ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺎﯾ ﯼﺪﻌﺑ ﻭﺩ ﻞﯾﺪﺒﺗ ﮏﯾ ﺪﯿﻫﺩ ﺮﯿﯿﻐﺗ ﺍﺭ ﻩﺪﺷ ﻞﯾﺪﺒﺗ ﺮﺻﺎﻨﻋ ﺖﯿﻌﻗﻮﻣ ﺪﻫﺩ ﯽﻣ ﻥﺎﮑﻣﺍ ﺎﻤﺷ ﻪﺑ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﯼﺎﻀﻓ ﺭﺩ ﻮﺗ ﺭﺩ ﻮﺗ ﺮﺻﺎﻨﻋ ﺶﯾﺎﻤﻧ ﻩﻮﺤﻧ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺮﺻﺎﻨﻋ ﻩﺪﻫﺎﺸﻣ ﻩﻮﺤﻧ ﺯﺍﺪﻧﺍ ﻢﺸﭼ ﺪﻨﮐ ﯽﻣ ﺺﺨﺸﻣ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺮﺻﺎﻨﻋ ﻦﯿﯾﺎﭘ ﺖﯿﻌﻗﻮﻣ ﺮﯿﺧ ﺎﯾ ﺪﺷﺎﺑ ﻩﺪﻫﺎﺸﻣ ﻞﺑﺎﻗ ﻪﺤﻔﺻ ﯼﻭﺭ ﻪﺑ ﻭﺭ ﻡﺪﻋ ﺕﺭﻮﺻ ﺭﺩ ﺪﯾﺎﺑ ﺮﺼﻨﻋ ﮏﯾ ﺎﯾﺁ ﻪﮐ ﺪﻨﮐ ﯽﻣ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺭﺍﺪﻘﻣ 16 ﺯﺍ 4x4 ﺲﯾﺮﺗﺎﻣ ﮏﯾ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻞﯾﺪﺒﺗ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻪﻤﺟﺮﺗ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ X ﺭﻮﺤﻣ ﺭﺍﺪﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻪﻤﺟﺮﺗ ﮏﯾ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ Y ﺭﻮﺤﻣ ﺭﺍﺪﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﻪﻤﺟﺮﺗ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ Z ﺭﻮﺤﻣ ﺭﺍﺪﻘﻣ ﺯﺍ ﻩﺩﺎﻔﺘﺳﺍ ﺎﺑ ﺍﺭ ﯼﺪﻌﺑ 3 ﻪﻤﺟﺮﺗ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺱﺎﯿﻘﻣ ﻞﯾﺪﺒﺗ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺱﺎﯿﻘﻣ ﻞﯾﺪﺒﺗ ،X ﺭﻮﺤﻣ ﯼﺍﺮﺑ ﯼﺭﺍﺪﻘﻣ ﻥﺩﺍﺩ ﺎﺑ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺱﺎﯿﻘﻣ ﻞﯾﺪﺒﺗ ﮏﯾ Y ﺭﻮﺤﻣ ﯼﺍﺮﺑ ﯼﺭﺍﺪﻘﻣ ﻥﺩﺍﺩ ﺎﺑ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺱﺎﯿﻘﻣ ﻞﯾﺪﺒﺗ ،Z ﺭﻮﺤﻣ ﯼﺍﺮﺑ ﯼﺭﺍﺪﻘﻣ ﻥﺩﺍﺩ ﺎﺑ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺶﺧﺮﭼ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ X ﺭﻮﺤﻣ ﺩﺍﺪﺘﻣﺍ ﺭﺩ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺶﺧﺮﭼ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ Y ﺭﻮﺤﻣ ﺩﺍﺪﺘﻣﺍ ﺭﺩ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺶﺧﺮﭼ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ Z ﺭﻮﺤﻣ ﺩﺍﺪﺘﻣﺍ ﺭﺩ ﺍﺭ ﯼﺪﻌﺑ ﻪﺳ ﺶﺧﺮﭼ ﺪﻨﮐ ﯽﻣ ﻒﯾﺮﻌﺗ ﯼﺪﻌﺑ ﻪﺳ ﻩﺪﺷ ﻞﯾﺪﺒﺗ ﺮﺼﻨﻋ ﮏﯾ ﯼﺍﺮﺑ ﺍﺭ ﻮﯿﺘﮑﭙﺳﺮﭘ ﯼﺎﻤﻧ
rotateX()rotateY()rotateZ()
rotateX() ﺵﻭﺭ
ﻝﺎﺜﻣ
#myDiv
{
transform: rotateX(150deg);
}<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
rotateY() ﺵﻭﺭ
ﻝﺎﺜﻣ
#myDiv
{
transform: rotateY(150deg);
}<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
</body>
</html>
rotateZ() ﺵﻭﺭr ﻝﺎﺜﻣ
#myDiv
{
transform: rotateZ(90deg);
}<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
#myDiv {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
</body>
</html>
CSS Transform Properties
CSS 3D Transform Methods
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)