تبدیل سه بعدی در CSS3
تبدیل سه بعدی یا (3D transforms) در CSS3
با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.
در این مطلب، دو متد زیر را فرا خواهید گرفت:
- ()rotateX
- ()rotateY
برای مشاهده تفاوت بین تبدیل دو بعدی و سه بعدی، روی عناصر زیر کلیک نمایید:
چرخش
دو بعدی
دو بعدی
چرخش
سه بعدی
سه بعدی
پشتیبانی مرورگرها
| خاصیت | پشتیبانی مرورگرها | ||||
|---|---|---|---|---|---|
| transform |  |
 |
 |
 |
 |
مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.
مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی را پشتیبانی می کند)
متد ()rotateX در CSS3
با استفاده از متد ()rotateX، می توان عنصر را با گرفتن یک درجه، حول محور X چرخاند.
مثال (تبدیل سه بعدی در CSS3)
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
خودتان امتحان کنید »{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
متد ()rotateY در CSS3
با استفاده از متد ()rotateY، می توان عنصر را با گرفتن یک درجه، حول محور Y چرخاند.
مثال (تبدیل سه بعدی در CSS3)
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خودتان امتحان کنید »{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خاصیت های تبدیل در CSS3
در جدول زیر، لیست تمام خاصیت های تبدیل، آورده شده است:
| خاصیت | توضیحات | CSS |
|---|---|---|
| transform | برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود. | 3 |
| transform-origin | به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید. | 3 |
| transform-style | نحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند. | 3 |
| perspective | نحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما) | 3 |
| perspective-origin | مشخص کننده محل قرار گیری عنصر سه بعدی از پایین. | 3 |
| backface-visibility | زمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر. | 3 |
متدهای تبدیل سه بعدی
| متد | توضیحات |
|---|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | تمامی تبدیل های سه بعدی را دربردارد. |
| translate3d(x,y,z) | یک حرکت سه بعدی، تعریف می کند. |
| translateX(x) | یک حرکت سه بعدی، در جهت محور X تعریف می کند. |
| translateY(y) | یک حرکت سه بعدی، در جهت محور Y تعریف می کند. |
| translateZ(z) | یک حرکت سه بعدی، در جهت محور Z تعریف می کند. |
| scale3d(x,y,z) | یک تغییر اندازه سه بعدی، تعریف می کند. |
| scaleX(x) | یک تغییر اندازه سه بعدی، در جهت محور X تعریف می کند. |
| scaleY(y) | یک تغییر اندازه سه بعدی، در جهت محور Y تعریف می کند. |
| scaleZ(z) | یک تغییر اندازه سه بعدی، در جهت محور Z تعریف می کند. |
| rotate3d(x,y,z,angle) | یک چرخش سه بعدی، تعریف می کند. (angle: زاویه چرخش) |
| rotateX(angle) | یک چرخش سه بعدی، حول محور X تعریف می کند. |
| rotateY(angle) | یک چرخش سه بعدی، حول محور Y تعریف می کند. |
| rotateZ(angle) | یک چرخش سه بعدی، حول محور Z تعریف می کند. |
| perspective(n) | یک دورنمای سه بعدی (perspective)، تعریف می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 22628
دیدگاه‌ها
سلام
Rotate که نمیچرخونه کوچیک میکنه.
با سلام.
rotate همونطور که اسمش هم مشخص میکنه، برای چرخش به کار میره. کد زیر رو یه تست کنید:
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transfo rm: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
<div style="width:100px;height:100px;">test</div>
البته قسمت بالایی رو باید داخل تگ style بنویسید.
اولین سایتیه که اموزشش دقیق و کامل هست.
ممنون بابت همه ی مطالب.
کلا سایت عالی هستش. خدا قوتتون بده
به نقل از میلاد:
سلام میتونید به این صفحه مراجعه کنید:
www.iranweblearn.com/articles/آموزش-افکت-کاربردی-front-back-با-css3
واقعا خسته نباشید
خواستم بدونم اگه بخواهیم وقتی صفه به سورت سه بعدی چرخید به جای اینکه پشتش معلوم باشه پشتش یه چیز دیگه باشه خالی هم نباشه مثلا یه عکس دیگه یا یه نوشته باشه باید چیکار کرد؟
واقعا عالیه به خدا یکه کارتون... دیگه نمیدونم چی بگم