طراحی وب: ۷- ترنسفورم سه بعدی

فضای سه‌بعدی

برای نمایش المنت‌ها در فضای سه بعدی باید از محورهای مختصات سه بعدی استفاده کرد. جهت این محورها به دو صورت می‌تواند باشد. که به آن راست‌گرد و یا چپ‌گرد می‌گویند.  اگر سه انگشت شست، نشانه و میانی دست خود را طوری  باز کنید که هر یک از آنها با زاویه ۹۰ درجه نسبت به دیگری قرار گیرد. انگشت شست جهت محور x را تعیین می‌کند. و انگشت نشانه جهت محور y را و انگشت میانی جهت محور z را نشان می‌دهد.

X: انگشت شست
Y: انگشت نشانه
Z: انگشت میانی

اگر از دست راست استفاده کنید جهت محورهای مختصات راست‌گرد و اگر از دست چپ استفاده کنید چپ‌گرد خواهد بود.

راست‌گرد: دست راست
چپ‌گرد: دست چپ

بیشتر جاها سیستم راست‌گرد به کار می‌رود. ولی در کامپیوتر سیستم مختصات چپ گرد است.

---

فانکشن‌های ترنسفورم

با پراپرتی transform در فضای سه بعدی نیز می‌توانید سایز، جا و یا شکل المنت را تغییر دهید.

فرم کلی آن به شکل زیر است:

transform: function( );

در پراپرتی ترنسفورم فانکشن‌های زیر را می‌توان به کار برد.

• rotate: چرخش
• translate: جابجایی
• scale: تغییر اندازه
• skew: کجی
• matrix: کلی

rotate

برای چرخاندن المنت حول محور x از فانکشن rotateX استفاده کنید.
زاویه را با یکی از واحدهای زیر بنویسید.

deg: درجه
rad: رادیان
grad: گرادیان
turn: تعداد دور

برای چرخاندن المنت حول محور y از فانکشن rotateY استفاده کنید.

برای چرخاندن المنت حول محور z از فانکشن rotateZ استفاده کنید. این معادل دستور rotate است.

برای چرخاندن المنت حول محور دلخواه از فانکشن rotate3d به شکل زیر استفاده کنید.

transform: rotate3d(x, y, z, angle);

محور مورد نظر، خطی است که از مبدأ مختصات و نقطه‌ای با مختصات (x، y، z) می‌گذرد. و angle زاویه چرخش است.

translate

برای جابجایی المنت بر روی محور x از فانکشن tranlateX استفاده کنید. در این جا از هر واحدی می‌توانید استفاده کنید.

برای جابجایی المنت بر روی محور y از فانکشن tranlateY استفاده کنید.

برای جابجایی المنت بر روی محور z از فانکشن tranlateZ استفاده کنید.

برای جابجایی المنت به نقطه دلخواه از فانکشن translate3d به شکل زیر استفاده کنید.

transform: translate3d(x, y, z);

scale

برای تغییر اندازه المنت بر روی محور x از فانکشن scaleX استفاده کنید. (این مقدار نسبی است و واحد نمی‌خواهد.)

برای تغییر اندازه المنت بر روی محور y از فانکشن scaleY استفاده کنید.

برای تغییر اندازه المنت بر روی محور z از فانکشن scaleZ استفاده کنید. اگر المنت در صفحه باشد، این فانکشن هیچ تأثیری ندارد.

ولی اگر المنت با صفحه مانیتور زاویه داشته باشد تغییر می‌کند.

برای تغییر اندازه المنت بر روی هر سه محور از فانکشن scale3d به شکل زیر استفاده کنید.

transform: scale3d(x,y,z);

skew

پراپرتی skew تنها بر روی محورهای x و y کار می‌کند.

matrix

برای این که همه موارد بالا را در یک فانکشن بگنجانید می‌توانید عبارت matrix3d را به کار برید.

---

پشت المنت

این پراپرتی تعیین می‌کند که هنگام چرخش المنت، محتوای آن از پشت دیده شود یا نه.

backface-visibility: visible(Default)|hidden;

---

مبدأ مختصات

به نقطه تقاطع محورها، مبدأ مختصات می‌گویند. فاصله‌ها، چرخش و یا پیچش به دور آن صورت می‌گیرد. در ترنسفورم به صورت پیش فرض مبدأ مختصات هر المنت در مرکز آن در نظر گرفته می‌شود. ولی شما می‌توانید آن را تغییر دهید.
با کمک پراپرتی transform-origin می‌توانید جای مبدأ را برای آن المنت تعیین کنید.

transform-origin: x y z;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)
z: length (default: 0)

---

پرسپکتیو

پرسپکتیو perspective یا ژرفانمایی به معنای نمایش یک شیء سه بعدی بر روی سطح دو بعدی است، همان گونه که با چشم دیده می‌شود. جای چشم بیننده (دیدگاه) در شکل تصویری که دیده می‌شود بسیار موثر است.

Perspective: A point of view.

با دو پراپرتی perspective و perspective-origin دیدگاه (جای چشم بیننده) را می‌توان تعیین کرد. این پراپرتی‌ها باید به پرنت داده شوند.

perspective

با کمک پراپرتی perspective می‌توانید فاصله دیدگاه را از صفحه z=0 تعیین کنید. (مقدار z نقطه دیدگاه)

perspective: z;

perspective-origin

با کمک پراپرتی perspective-origin می‌توانید x و y دیدگاه را تعیین کنید.

perspective-origin: x y;

x: left | center | right | length (default: 50%)
y: top | center | bottom | length (default: 50%)

---

تخت یا سه بعدی

این پراپرتی تعیین می‌کند که المنت تخت باشد یا سه بعدی. این پراپرتی را باید به پرنت بدهید.

transform-style: flat(Default)|preserve-3d;

---

مثال

چرخش تصویر حول محور y:

.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.card {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
}
.card .back {
	transform: rotateY(180deg);
}
.parent:hover .card {
	transform: rotateY(180deg);
}

مثال

چرخش تصویر حول محور y:

.parent {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
}	
.item {
	position: absolute;
	transition: all 1s;
	backface-visibility: hidden;
	transform-origin: center right;
}
item.back {
	transform: rotateY(180deg);
}
parent:hover item {
	transform: translateX(-100%) rotateY(180deg);
}

مثال

Parallax

.parent {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: scroll;
	perspective: 1px;
}	
item.back {
	position: relative;
	z-index: -1;
	transform-origin: top;
	transform: translateZ(-1px) translateY(-50vh) scale(2);
}