CSSالتحويلات الثلاثية الأبعاد

مفهوم التحويلات الثلاثية الأبعاد

توفر لك CSS مجموعة من الدوال التي يمكنك استخدامها لإجراء تحويلات ثلاثية الأبعاد ( 3D Transforms ) على العناصر مثل إزاحتها من مكانها الأساسي، تدويرها بدرجة معينة، جذب زواياها باتجاه محدد، أو إعادة تحجيمها.

التحويلات الثلاثية الأبعاد يمكن إجراءها على العناصر بواسطة الخاصية transform و من ثم تمرير إحدى دوال التحويل لها كقيمة.
في هذا الدرس ستتعرف على جميع الدوال التالية:

translateX() translateY() translateZ() translate3d() scaleX() scaleY() scaleZ() scale3d() rotateX() rotateY() rotateZ() rotate3d() perspective()

كما ستتعرف على خصائص أخرى تستخدم لأجل عرض العناصر من منظور ثلاثي الأبعاد بالشكل الذي نريده.

المحاور الثلاثية الأبعاد X و Y و Z

عند التعامل مع مجسمات أو أشكال هندسية ثلاثية الأبعاد فإننا فعلياً نتعامل مع ثلاث محاور هي X و Y و Z كما في الصورة التالية.

في عالم ثلاثي الأبعاد، النقطة التي تلتقي عندها المحاور الثلاث تسمى نقطة التحوّل ( Transform Origin ) لأن أي تحويلات يتم إجراءها تكون مبنية على موقع هذه النقطة و التي تكون إفتراضياً موجودة في الوسط.

بالنسبة لمن يشاهد الرسم من منظور ثلاثي الأبعاد، فإن موقعه يكون على خط المحور Z مما يعني أنه كلما كان قريب منه بدا الرسم أكبر و كلما ابتعد عنه بدا أصغر.

مفهوم المنظور الثلاثي الأبعاد

ليظهر العنصر من منظور ثلاثي الأبعاد يجب تحديد كم هو بعيد بالنسبة لموقعه الأساسي عن الشاشة، بمعنى آخر يجب تحديد كم هي المسافة بين نقطة التحوّل و المحور Z.

المسافة ما بين نقطة التحوّل الموجودة في العنصر و المحور Z الذي يكون موجود في وسطه (إفتراضياً) يمكنك تحديدها بواسطة الخاصية perspective التي يمكن إضافتها للحاوية التي سيتم عرض العنصر فيها.

إذا كان الرسم الثلاثي الأبعاد يتألف من أكثر من جزئية، فإن كل جزئية منها لديها ثلاث محاور أيضاً و يمكنك التحكم بها على حدا و تستطيع تحديد منظور كل جزئية بشكل مباشر بواسطة الدالة perspective() أو perspective-origin().

كمثال عملي، لاحظ أنه يمكنك تحويل 6 مربّعات إلى مكعّب. كل مربّع منهم عنده ثلاث محاور ( X و Y و Z ) و منظور كل مربّع منهم يمكن تحديده بواسطة الخاصية perspective() أو perspective-origin() حتى يتخذوا موقعهم كما نريد.

لو أردت من بعد ذلك تحديد المنظور بالنسبة للمكعب كاملاً فإنك تستطيع إضافة الخاصية perspective للعنصر الذي سيحوي كل هذه المربعات و ضبطها كما تريد بدون الحاجة لإجراء أي تعديل على منظور كل مربع على حدا.

لا تقلق إن لم تفهم الفروقات بين الدوال perspective() و perspective-origin() و الخاصية perspective بشكل دقيق الآن لأنك ستفهمهم لاحقاً من الأمثلة و لكن عليك معرفة أنك بحاحة لاستخدام أي واحدة منهم على الأقل حتى تستطيع مشاهدة العنصر من منظور ثلاثي الأبعاد.

تدوير العنصر الثلاثي الأبعاد

لتدوير العنصر بدرجة محددة يمكنك استخدام إحدى الدوال التالية مع الإشارة إلى أنك تستطيع استخدام أكثر من دالة في ذات الوقت.

في المثال التالي قمنا بجعل العنصر يدور على المحور X بمقدار 20 درجة.

#demo {
    transform: rotateX(20deg);
}

في المثال التالي قمنا بجعل العنصر يدور على المحور Y بمقدار 20 درجة.

#demo {
    transform: rotateY(20deg);
}

في المثال التالي قمنا بجعل العنصر يدور على المحور Z بمقدار 45 درجة.

#demo {
    transform: rotateZ(45deg);
}

في المثال التالي قمنا بجعل العنصر يدور على المحور Y بمقدار 30 درجة و على المحور Z بمقدار 45 درجة.

#demo {
    transform: rotateY(30deg) rotateZ(45deg);
}

في المثال التالي قمنا بجعل العنصر يدور على جميع المحاور بمقدار 45 درجة مع وضع النسبة 1 على جميع المحاور لكي يكون مائل بذات القدر على جميع المحاور.

#demo {
    transform: rotate3d(1, 1, 1, 45deg);
}

في المثال التالي قمنا بجعل العنصر يدور على جميع المحاور بمقدار 45 درجة و لكننا جعلنا مقدار الدوران على المحور X أكبر بنسبة 1، و مقدار الدوران على المحور Z أصغر بنسبة 3.

#demo {
    transform: rotate3d(2, 1, -2, 45deg);
}

تحريك العنصر الثلاثي الأبعاد

لإزاحة أو تحريك العنصر من مكانه يمكنك استخدام إحدى الدوال التالية مع الإشارة إلى أنك تستطيع استخدام أكثر من دالة في ذات الوقت.

في المثال التالي قمنا بجعل العنصر يتقدّم على المحور X بمقدار 40 بكسل.

#demo {
    transform: translateX(40px);
}

في المثال التالي قمنا بجعل العنصر يتقدّم على المحور Y بمقدار 40 بكسل.

#demo {
    transform: translateY(40px);
}

في المثال التالي قمنا بجعل العنصر يتقدّم على المحور Z بمقدار 40 بكسل.

#demo {
    transform: translateZ(40px);
}

في المثال التالي قمنا بجعل العنصر يتقدّم على المحور X بمقدار 30 بكسل و يتقدّم 40 بكسل على المحور Y.

#demo {
    transform: translateX(30px) translateY(40px);
}

في المثال التالي قمنا بجعل العنصر يتقدّم على المحور X بمقدار 30 بكسل، و يتقدم على المحور Y بمقدار 40 بكسل، و يتراجع على المحور Z بمقدار 20 بكسل.

#demo {
    transform: translate3d(30px, 40px, -20px);
}

تحجيم العنصر الثلاثي الأبعاد

لتكبير أو تصغير العنصر بنسبة محددة يمكنك استخدام إحدى الدوال التالية مع الإشارة إلى أنك تستطيع استخدام أكثر من دالة في ذات الوقت.

الآن عليك معرفة أن أي دالة تستخدمها منهم يجب إعطاءها رقم يمثل الحجم الجديد من أصل واحد، مما يعني أن الحجم 1 هو الحجم الطبيعي للعنصر.

إذاً في حال وضعت الحجم 1 للعنصر لن تلاحظ أي اختلاف لأن هذا الحجم الإفتراضي، أما إذا وضعت 0.5 فهذا يعني أنك تريد تصغير حجمه إلى النصف، و إذا وضعت 1.5 فهذا يعني أنك تريد تكبير حجمه بمقدار النصف و هكذا.

في المثال التالي قمنا بتكبير حجم العنصر على المحور X بنسبة 0.5 عن حجمه الطبيعي.

#demo {
    transform: scaleX(1.5);
}

في المثال التالي قمنا بتكبير حجم العنصر على المحور Y بنسبة 0.5 عن حجمه الطبيعي.

#demo {
    transform: scaleY(1.5);
}

في المثال التالي قمنا بتكبير حجم العنصر على المحور Z بنسبة 0.5 عن حجمه الطبيعي.

#demo {
    transform: scaleZ(1.5);
}

في المثال التالي قمنا بتكبير حجم العنصر على المحور X بنسبة 0.8، و تكبير حجم العنصر على المحور Y بنسبة 0.5، عن حجمه الطبيعي.

#demo {
    transform: scaleX(1.8) scaleY(1.5);
}

في المثال التالي قمنا بتكبير حجم العنصر على المحور X بنسبة 0.5، و تصغيره على المحور Y بنسبة 0.2، و تكبيره على المحور Z بنسبة 1، عن حجمه الطبيعي.

#demo {
    transform: scale3d(1.5, 1.2, 2);
}

إمالة العنصر الثلاثي الأبعاد

لإمالة العنصر بدرجة محددة على المحورين X و Y يمكنك استخدام إحدى الدوال التالية مع الإشارة إلى أنك تستطيع استخدام أكثر من دالة في ذات الوقت.

في المثال التالي قمنا بجعل العنصر يميل بمقدار 20 درجة على المحور X.

#demo {
    transform: skewX(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل بمقدار 20 درجة على المحور Y.

#demo {
    transform: skewY(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه المحور X بمقدار 20 درجة.

#demo {
    transform: skew(20deg);
}

في المثال التالي قمنا بجعل العنصر يميل باتجاه المحور X بمقدار 20 درجة و يميل باتجاه المحور Y بمقدار 10 درجات.

#demo {
    transform: skew(20deg, 10deg);
}

تحديد موقع نقطة التحول

إفتراضياً، نقطة التحول ( Transform Origin ) تكون في الوسط تماماً ما لم يتم تغيير موقعها و لكن يمكنك استخدام الخاصية transform-origin لتحديد أين سيكون موقعها بالنسبة للعنصر.

إحداثيات نقطة التحول

عند التعامل مع هذه الخاصية يمكنك تمرير قيمتين أو ثلاث قيم لها على النحو التالي:

• في حال قمت بتمرير قيمتين لها، فإنه سيتم تغيير إحداثيات نقطة التحول على المحورين X, Y.
• في حال قمت بتمرير ثلاث قيم لها، فإنه سيتم تغيير إحداثيات نقطة التحول على المحاور X, Y, Z.

كما يمكنك استخدام الكلمات المفتاحية التالية لتحديد الإحداثيات على المحور X:

• left و هي تمثل 0%.
• center و هي تمثل 50%.
• right و هي تمثل 100%.

و يمكنك استخدام الكلمات المفتاحية التالية لتحديد الإحداثيات على المحور Y:

• top و هي تمثل 0%.
• center و هي تمثل 50%.
• bottom و هي تمثل 100%.

في المثال التالي قمنا بتغيير إحداثيات نقطة التحول الإفتراضية على المحورين X و Y و قد استخدمنا الكلمات المفتاحية المخصصة لتحديد موقعها.

#demo {
    transform-origin: left top;
    transform: rotateZ(20deg);
}

تصميم عنصر ثلاثي الأبعاد

فيما يلي سنقوم ببناء شكل ثلاثي الأبعاد و من ثم نقوم بتجربة تدويره، إمالاته، تحريكه و تحجميه حتى تعرف كيف تتعامل مع عنصر ثلاثي الأبعاد يتألف من عدة جزئيات.

في المثال التالي قمنا ببناء مكعّب يتألف من 6 أوجه، أي يتألف من 6 عناصر. كل عنصر منهم قمنا بتحديد موقعه و درجة دورانه ليظهر في المكان الصحيح بالإضافة إلى أننا قمنا بإعطاء كل عنصر منهم لون مختلف و جعلناه شفاف قليلاً حتى يكون بالإمكان رؤية ما يوجد خلفه.

<style>
.cube {
    width: 200px;
    height: 200px;
    perspective: 500px;
    perspective-origin: 150% 100%;
    transform-style: preserve-3d;
}

.face {
    position: absolute;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-family: Arial;
    font-size: 50px;
    text-align: center;
    color: white;
}

.front {
    background: rgba(0, 0, 0, 0.3);
    transform: translateZ(50px);
}

.back {
    background: rgba(0, 255, 0, 1);
    transform: rotateY(180deg) translateZ(50px);
}

.right {
    background: rgba(196, 0, 0, 0.7);
    transform: rotateY(90deg) translateZ(50px);
}

.left {
    background: rgba(0, 0, 196, 0.7);
    transform: rotateY(-90deg) translateZ(50px);
}

.top {
    background: rgba(196, 196, 0, 0.7);
    transform: rotateX(90deg) translateZ(50px);
}

.bottom {
    background: rgba(196, 0, 196, 0.7);
    transform: rotateX(-90deg) translateZ(50px);
}
</style>

<div class="cube">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
</div>

إظهار العنصر بشكل مسطح أو ثلاثي الأبعاد

العنصر الذي يتكوّن من عدة جزئيات معروضة بشكل ثلاثي الأبعاد يمكن جعله يملك خصائص ثلاثية الأبعاد الأمر الذي يجعل جزئياته يتم عرضها بشكل أقرب للحقيقة خاصةً حينما تتداخل في بعضها.

يمكنك استخدام الخاصية transform-style لتحديد ما إن كان يجب معاملة جزئيات العنصر بشكل ثلاثي الأبعاد أو كأنها جسم مسطح ثنائي الأبعاد. فيما يلي القيم التي يمكنك إعطاءها لها.

في المثال التالي قمنا بعرض عنصر ثلاثي الأبعاد مع تحديد أنه جسم مسطح ( يظهر بشكل flat ) الأمر الذي سيجعل جزئياته لا تظهر بشكل جيد حيث تتداخل ببعضها.

.cube {
    transform-style: flat;
}

في المثال التالي قمنا بعرض عنصر ثلاثي الأبعاد مع تحديد أنه يجب الحفاظ على خصائصه، الأمر الذي سيجعل جزئياته المتداخلة تظهر بشكل واقعي.

.cube {
    transform-style: preserve-3d;
}

تغيير موقع نقطة منظور العنصر الثلاثي الأبعاد

إفتراضياً، يتم عرض الرسم الثلاثي الأبعاد و كأن الشخص ينظر إليه تماماً في منتصفه. و معنى ذلك أن نقطة المنظور ( Perspective Origin ) بالنسبة للرسم كلّه تكون في وسطه تماماً مثل نقطة التحول ( Transform Origin ) الخاصة بكل جزئية فيه.

الآن عليك معرفة أنه، يمكنك استخدام الخاصية perspective-origin لتحديد أين سيكون موقعها بالنسبة للعنصر.

إحداثيات نقطة المنظور

عند التعامل مع هذه الخاصية يمكنك تمرير قيمتين لها و بذلك تحدد إحداثيات نقطة المنظور على المحورين X, Y.

كما يمكنك استخدام الكلمات المفتاحية التالية لتحديد الإحداثيات على المحور X:

• left و هي تمثل 0%.
• center و هي تمثل 50%.
• right و هي تمثل 100%.

و يمكنك استخدام الكلمات المفتاحية التالية لتحديد الإحداثيات على المحور Y:

• top و هي تمثل 0%.
• center و هي تمثل 50%.
• bottom و هي تمثل 100%.

في المثال التالي قمنا بعرض العنصر نفسه مع تغيير إحداثيات نقطة المنظور في كل مرة حتى يظهر من زوايا مختلفة.

.perspective-150-100 {
    perspective-origin: 150% 100%;
}

.perspective-200-100 {
    perspective-origin: 200% 100%;
}

.perspective-200-150 {
    perspective-origin: 200% 150%;
}