تبدیل سه بعدی css3

تبدیل سه بعدی css3

CSS3 تحولات عظیمی در کار با عناصر ایجاد کرد که مهم ترین آنها انیمیشن ها و Transform و Transition می باشد. Transform یا به عبارتی تغییر شکل، متد ها و خاصیت هایی به همراه خود دارد که میتوان به وسیله ی آنها اعمالی چون چرخش(rotate)، جابه‌جایی(translate)، بزرگنمایی(scale)و کج‌کردن(skew) را بر روی عناصر انجام داد.

Transform ها به دو دسته ی دو بعدی و سه بعدی تقسیم میشوند. در ۲D Transform(تغییر شکل دو بعدی) تنها با دو محور X و Y کار میکردیم ولی در ۳D Transform پای محور Z یا عمق نیز به میان آمد.

تبدیل سه بعدی css3 تبدیل سه بعدی css3 تبدیل سه بعدی css3 A three dimensional css3

تبدیل سه بعدی css3

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

CSS3 به شما این امکان را می دهد که به عناصر خود جلوه های دو بعدی (۲D) یا سه بعدی (۳D) بدهید.
با استفاده از تبدیل سه بعدی می توانید به عناصر جلوه سه بعدی اضافه کنید.
در این فصل، با سه متد زیر آشنا خواهید شد:
  • ()rotateX
  • ()rotateY
  • ()rotateZ
 
مرورگرهای Internet Explorer 10 و Firefox تبدیل سه بعدی را پشتیبانی می کنند.
مرورگرهای Chrome و Safari به پشوند -webkit- نیاز دارند.
مرورگر Opera تبدیل سه بعدی را پشتیبانی نمی کند. (تنها تبدیل دو بعدی را پشتیبانی می کند)

Transform ها به دو دسته ی دو بعدی و سه بعدی تقسیم میشوند. در ۲D Transform(تغییر شکل دو بعدی) تنها با دو محور X و Y کار میکردیم ولی در ۳D Transform پای محور Z یا عمق نیز به میان آمد.

متد ()rotateX در CSS3
 
متد ()rotateX، عنصر را با گرفتن یک درجه، حول محور X می چرخاند:
تبدیل سه بعدی css3 تبدیل سه بعدی css3 تبدیل سه بعدی css3 1A three dimensional css3

تبدیل سه بعدی css3

متد ()rotateY در CSS3
 
متد () rotateY، عنصر را با گرفتن یک درجه، حول محور Yمی چرخاند:
تبدیل سه بعدی css3 تبدیل سه بعدی css3 تبدیل سه بعدی css3 2A three dimensional css3

تبدیل سه بعدی css3

متد ()rotateZ در CSS3
 
متد ()rotateZ، عنصر را با گرفتن یک درجه، حول محور Z می چرخاند:
تبدیل سه بعدی css3 تبدیل سه بعدی css3 تبدیل سه بعدی css3 3A three dimensional css3

تبدیل سه بعدی css3

 
خاصیت های تبدیل در CSS3
 
در جدول زیر، لیست تمام خاصیت های تبدیل آورده شده است:
 
خاصیت توضیحات
transform برای اعمال یک تبدیل دو بعدی یا سه بعدی روی یک عنصر بکار می رود
transform-origin به شما اجازه می دهد تا مکان عنصر تبدیل شده را تغییر دهید
transform-style نحوه ی عمل عناصر تودرتو در فضاهای سه بعدی را مشخص می کند
perspective (نحوه نمایش عناصر سه بعدی را مشخص می کند.(دور نما
perspective-origin مشخص کننده محل قرار گیری عنصر سه بعدی از پایین
backface-visibility زمانی که در اثر چرخش، پشت عنصر نمایان می شود، مشخص می کند که عنصر نمایش داده شود یا خیر
 
متدهای تبدیل سه بعدی
 
متد توضیحات
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) یک چرخش سه بعدی، تعریف می کند.
rotateX(angle) تعریف می کند X یک چرخش سه بعدی، حول محور
rotateY(angle) تعریف می کند Y یک چرخش سه بعدی، حول محور 
rotateZ(angle) تعریف می کند Z یک چرخش سه بعدی، حول محور
perspective(n)  یک دورنمای سه بعدی تعریف می کند

ژرف‌نمایی یا پرسپکتیو(Perspective)

در واقع برای نشان دادن فضای سه بعدی روی صفحهٔ دوبعدی معمولاً پرسپکتیو و قوانین آن را به کار می‌برند. این قوانین با استفاده از خطای دید به دست آمده و عمق کاذب و بعد مجازی ایجاد شده می‌تواند تصویری از فضای سه بعدی را بدهد. می‌توان گفت پرسپکتیو نگاهی است که معمولاً از جهان بیرون یعنی عالم محسوسات مادی آغاز می‌شود و سپس به درون‌نگری راه می‌برد.

CSS3  ۳D Transforms

و حالا نوبت پرسپکتیو در صفحات وب رسیده است! البته منظورم از حالا همین الان نیست چون تقریبا از سال ۲۰۱۰ عناصر سه بعدی توسط مرورگر کروم پشتیبان میشد و حالا پشتیبانی از ۳D Transform همه گیر شده و حتی مرورگر IE هم از نسخه ی ۱۰ و ۱۱ این تغییر شکل های سه بعدی رو پشتیبانی میکنه.

خاصیت های CSS3 Transform عبارتند از transform , transform-style , transform-origin , perspective  , perspective-origin و backface-visibility که در این مطلب به برسی خاصیت های perspective و perspective-origin می پردازیم.

CSS3 Transform متدهایی چون rotate ، translate ، scale ، skew دارد که برای کار با عناصر دو بعدی است و متد های rotate3d ، scale3d ، translate3d ، perspective برای کار با عناصر سه بعدی است.

میزان پشتیبانی از خاصیت و متد های CSS3 Transform

همونطور که در بالا اشاره کردم، مرورگر ها پشتیبانی خیلی خوبی از CSS3  Transforms دارند. در تصویر زیر میتونید مقدار پشتیبانی رو ببینید.

support تبدیل سه بعدی css3 تبدیل سه بعدی css3 support

با توجه به تصویر بالا کافیست خاصیت هارا تنها همراه با پیشوند -webkit- بنویسیم.

Perspective

خاصیت perspective یک مقدار عددی میگیرد. فرض کنید یک جسم مسطح در حال چرخیدن است؛ خاصیت perspective مقدار فاصله چشم تا جسم را مشخص میکند. وقتی مقدار perspective یک عنصر را مشخص میکنید، فرزندان آن عنصر دارای perspective میشوند. برای مثال به کد زیر توجه کنید.

نکته : متد rotateY یک عنصر را هم‌تراز با محور Y و متد rotateX یک عنصر را هم‌تراز با محور X میچرخاند.

perspective-origin

با استفاده از این خاصیت میتوانید مکان قرار گیری یک عنصر در فضای سه بعدی را مشخص کنید. اگر دقت کرده باشید، وقتی که در یک نقطه ایستاده اید و به یک جسم در نقاط مختلف نگاه می کنید، آن جسم هر دفعه به صورتی دیگر دیده میشود.

 

X و Y مقدار های درصدی و پیکسلی میگیرند. میتوانید به X مقدار های left ، right و center، و به Y مقادیر top ، bottom و center بدهید. مقدار پیشفرض برابر center center یا ۵۰% ۵۰% میباشد.

از این خاصیت همراه با خاصیت perspective استفاده میکنند.

 
 
آموزش CSS آموزش طراحی وب

دیدگاه خود را بیان کنید