تخفیف ویژه هفته کتاب و کتاب خوانی، فرصت یادگیری با 40٪ تخفیف (کد تخفیف: Ketab)
زمان باقی مانده تخفیف ویژه (تمدید شد)
سبد (0)

تبلیغات

تبدیل سه بعدی در CSS3

تبدیل سه بعدی یا (3D transforms) در CSS3

Wiki

با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.

در این مطلب، دو متد زیر را فرا خواهید گرفت:

  • ()rotateX
  • ()rotateY

برای مشاهده تفاوت بین تبدیل دو بعدی و سه بعدی، روی عناصر زیر کلیک نمایید:

چرخش
دو بعدی
چرخش
سه بعدی

پشتیبانی مرورگرها

Wiki

خاصیتپشتیبانی مرورگرها
transform

مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.

مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.

مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی  را پشتیبانی می کند)


متد ()rotateX در CSS3

Wiki

Rotate X

با استفاده از متد ()rotateX، می توان عنصر را با گرفتن یک درجه، حول محور X چرخاند.

مثال (تبدیل سه بعدی در CSS3)

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

متد ()rotateY در CSS3

Wiki

Rotate Y

با استفاده از متد ()rotateY، می توان عنصر را با گرفتن یک درجه، حول محور Y چرخاند.

مثال (تبدیل سه بعدی در CSS3)

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}
خودتان امتحان کنید »

خاصیت های تبدیل در CSS3

Wiki

در جدول زیر، لیست تمام خاصیت های تبدیل، آورده شده است:

خاصیتتوضیحاتCSS
transform برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود. 3
transform-origin به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید. 3
transform-style نحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند. 3
perspective نحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما) 3
perspective-origin مشخص کننده محل قرار گیری عنصر سه بعدی از پایین. 3
backface-visibility زمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر. 3

متدهای تبدیل سه بعدی

Wiki

متدتوضیحات
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)، تعریف می کند.

دیدگاه‌ها  

+2 # سپیده123 1395-07-20 14:43
سلام
Rotate که نمیچرخونه کوچیک میکنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-07-20 16:25
با سلام.
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 بنویسید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # niloofar 1395-03-12 14:02
اولین سایتیه که اموزشش دقیق و کامل هست.
ممنون بابت همه ی مطالب.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # محمد صمیمی 1394-08-11 17:08
کلا سایت عالی هستش. خدا قوتتون بده
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # hassani 1393-11-26 15:16
به نقل از میلاد:
واقعا خسته نباشید
خواستم بدونم اگه بخواهیم وقتی صفه به سورت سه بعدی چرخید به جای اینکه پشتش معلوم باشه پشتش یه چیز دیگه باشه خالی هم نباشه مثلا یه عکس دیگه یا یه نوشته باشه باید چیکار کرد؟

سلام میتونید به این صفحه مراجعه کنید:
www.iranweblearn.com/articles/آموزش-افکت-کاربردی-front-back-با-css3
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # میلاد نظری 1393-11-23 19:56
واقعا خسته نباشید
خواستم بدونم اگه بخواهیم وقتی صفه به سورت سه بعدی چرخید به جای اینکه پشتش معلوم باشه پشتش یه چیز دیگه باشه خالی هم نباشه مثلا یه عکس دیگه یا یه نوشته باشه باید چیکار کرد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # میلاد نظری 1393-11-23 19:39
واقعا عالیه به خدا یکه کارتون... دیگه نمیدونم چی بگم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS3

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
تبلیغات اینترنتی