آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تبدیل سه بعدی (خاصیت transform 3D) در CSS3

دوره های مرتبط با این مقاله

تبدیل سه بعدی (خاصیت transform 3D) در CSS3

CSS3 به شما امکان می دهد به المان های خود جلوه ی سه بعدی اعمال کنید (آن ها را به صورت سه بعدی قالب دهی کنید).
مرورگرهای زیر با ذکر ویرایشی که از این خاصیت پشتیبانی می کنند در جدول زیر ارائه گردیده:

خاصیت
IE
Chrome
Firefox
Safari
Opera
transform
10.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
23.0 15.0 -webkit-
transform-origin (three-value syntax)
10.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
transform-style
11.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
23.0 15.0 -webkit-
perspective
10.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
23.0 15.0 -webkit-
perspective-origin
10.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
23.0 15.0 -webkit-
backface-visibility
10.0
36.0 12.0 -webkit-
16.0 10.0 -moz-
4.0 -webkit-
23.0 15.0 -webkit-

توابع تبدیل سه بعدی CSS3

مبحث پیش رو متدهای تبدیل سه بعدی را در CSS3 برای شما تشریح می کند:

rotateX()
rotateY()
rotateZ()

متد rotateX()

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

   
                    div {
                    -webkit-transform: rotateX(150deg); /* Safari */
                    transform: rotateX(150deg);
                    }
                

تابع rotateY()

متد مزبور یک المان را حول محور Y بر اساس درجه ی تعیین شده می چرخاند.

   
                div { 
                -webkit-transform: rotateY(130deg); /* Safari */ 
                transform: rotateY(130deg); 
                }
 
                

متد rotateZ()

تابع مذکور یک المان را حول محور Z آن بر اساس درجه ی معین می چرخاند:

   
                    div {
                    -webkit-transform: rotateZ(90deg); /* Safari */
                    transform: rotateZ(90deg);
                    }
                

خاصیت های transform CSS3:

جدول زیر کلیه ی خاصیت های مربوط به transform در CSS3 را فهرست می کند:

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

توابع تبدیل سه بعدی در CSS3:

تابع
شرح
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
کلیه ی تبدیل های سه بعدی را دربر می گیرد
translate3d(x,y,z)
انتقال (حرکت) سه بعدی عنصر را مقدار دهی می کند
translateX(x)
یک انتقال سه بعدی را تعریف کرده و فقط مقدار محور 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)
چرخش سه بعدی را تعریف می کند
rotateX(angle)
چرخش عنصر را در امتداد محور X تعریف می کند
rotateY(angle)
چرخش سه بعدی در طول محور Y تعریف می کند
rotateZ(angle)
یک چرخش سه بعدی در امتداد محور Z تعریف می کند
perspective(n)
یک دورنمای سه بعدی (perspective) برای المان تبدیل شده تعریف می کند
  • 3370
  •    1208
  • تاریخ ارسال :   1394/07/27

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .