السلام عليكم، سنرى في هذا الدرس تقنية Transformation في CSS حيث سنتطرق إلى الخواص المتعلقة بهذه التقنية، و التي هي :
* الخاصية 'TRANSFORM'
* الخاصية 'PERSPECTIVE'
* الخاصية 'PERSPECTIVE-ORIGIN'
* الخاصية 'TRANSFORM-ORIGIN'
* الخاصية 'TRANSFORM-STYLE'
* الخاصية 'BACKFACE-VISIBILITY'
تقنية Transformation هي تقنية تجعل العناصر HTML تتحول سواء بالإزاحة أو الإستدارة أو التحجيم أو الإنحراف، و هذا التحويل يمكن أن يكون في حيز ثنائي الأبعاد (x , y)، أو في حيز ثلاثي الأبعاد (x , y , z).
الخاصية TRANSFORM
تعتبر الخاصية 'TRANSFORM' الخاصية الرئيسية في إنشاء تقنية Transformation حيث تحدد نوعية التحويل من التحويلات الأربعة، لديها واحد و عشرون قيمة خاصة، أحد عشر قيمة تعمل في الحيز الثنائي الأبعاد 2D، و هم :
• القيمة '()rotate'
• القيمة '()translate'
• القيمة '()translateX'
• القيمة '()translateY'
• القيمة '()scale'
• القيمة '()scaleX'
• القيمة '()scaleY'
• القيمة '()skew'
• القيمة '()skewX'
• القيمة '()skewY'
• القيمة '()matrix'
أما العشر قيم المتبقية، فتعمل في الحيز الثلاثي الأبعاد 3D، و هم :
• القيمة '()perspective'
• القيمة '()rotateX'
• القيمة '()rotateY'
• القيمة '()rotateZ'
• القيمة '()rotate3d'
• القيمة '()translateZ'
• القيمة '()translate3d'
• القيمة '()scaleZ'
• القيمة '()scale3d'
• القيمة '()matrix3d'
تقبل الخاصية 'transform' من القيم الشاملة قيمتين، أما قيمتها التلقائية فتسمى 'none' حيث تمنع إنشاء تقنية Transformation.
القيمة ()rotate
تخول هذه القيمة تحويل العنصر عن طريق الإستدارة، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن نقطة الإستدارة هي مركز العنصر، فإذا كان الـ Parameter موجباً ستتم استدارة العنصر مع اتجاه عقارب الساعة، أما إذا كان سالباً، فستتم استدارة العنصر عكس اتجاه عقارب الساعة.
القيمة ()translate
تخول هذه القيمة تحويل العنصر عن طريق الإزاحة، و تقحم إتنان Parameters مفصولين بعلامة Comma :
- الـ Parameter الذي في اليسار هو المسؤول على الإزاحة الأفقية، حيث أنه إذا كان موجباً سيزيح العنصر يميناً، و إذا كان سالباً سيزيح العنصر يساراً، أما إذا كان يساوي 0 فلن يزيح العنصر.
- الـ Parameter الذي في اليمين هو المسؤول على الإزاحة العمودية، حيث أنه إذا كان موجباً سيزيح العنصر إلى الأسفل، و إذا كان سالباً سيزيح العنصر إلى الأعلى، أما إذا كان يساوي 0 فلن يزيح العنصر.
القيمة ()translateX
تخول هذه القيمة تحويل العنصر عن طريق الإزاحة الأفقية، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، فإذا كان الـ Parameter موجباً ستتم إزاحة العنصر يميناً، أما إذا كان سالباً، فستتم إزاحة العنصر يساراً.
القيمة ()translateY
تخول هذه القيمة تحويل العنصر عن طريق الإزاحة العمودية، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، فإذا كان الـ Parameter موجباً ستتم إزاحة العنصر إلى الأسفل، أما إذا كان سالباً، فستتم إزاحة العنصر إلى الأعلى.
القيمة ()scale
تخول هذه القيمة تحويل العنصر عن طريق التحجيم، أي أنها تكبر أو تصغر عرض و ارتفاع العنصر، أو تعمل له تماثل محوري، أي تجعل يمينه يساره و يساره يمينه و أعلاه أسفله و أسفله أعلاه، و يقحم بين قوسيها إما Parameter واحد أو إثنان Parameters بحيث أن الـ Parameter لديها يكون عبارة عن عدد يُضرَب في عرض أو ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.
في حالة إقحام Parameter واحد، يُضرب هذا الأخير في عرض و ارتفاع العنصر ليكبرهما أو يصغرهما أو يعمل لهما تماثل محوري، أما في حالة إقحام إثنان Parameters، فيُفصَل هذين الأخيرين بعلامة Comma، يُضرب الـ Parameter الذي في اليسار في عرض العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، و يُضرب الـ Parameter الذي في اليمين في ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري.
القيمة ()scaleX
تخول هذه القيمة تحويل العنصر عن طريق التحجيم الأفقي، أي أنها تكبر أو تصغر عرض العنصر، أو تعمل له تماثل محوري، و يقحم بين قوسيها Parameter واحد يضرب في عرض العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.
القيمة ()scaleY
تخول هذه القيمة تحويل العنصر عن طريق التحجيم العمودي، أي أنها تكبر أو تصغر ارتفاع العنصر، أو تعمل له تماثل محوري، و يقحم بين قوسيها Parameter واحد يضرب في ارتفاع العنصر ليكبره أو يصغره أو يعمل له تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.
القيمة ()skew
تخول هذه القيمة تحويل العنصر عن طريق الإنحراف، و يقحم بين قوسيها إثنان Parameters بوحدة قياس 'deg' مفروقة بعلامة Comma :
- الـ Parameter الذي في اليسار هو المسؤول عن الإنحراف الأفقي للعنصر، بحيث أن الـ Parameter الموجب يعمل انحراف نحو اليسار، و الـ Parameter السالب يعمل انحراف نحو اليمين.
- الـ Parameter الذي في اليمين هو المسؤول عن الإنحراف العمودي للعنصر، بحيث أن الـ Parameter الموجب يعمل انحراف نحو الأعلى، و الـ Parameter السالب يعمل انحراف نحو الأسفل.
القيمة ()skewX
تخول هذه القيمة تحويل العنصر عن طريق الإنحراف الأفقي، أي أن الإنحراف يتم سوى إلى اليمين أو إلى اليسار، و يقحم بين قوسيها Parameter واحد بوحدة قياس 'deg' يعبر عن درجة الإنحراف الأفقي، بحيث أن الـ Parameter الموجب يعمل انحراف نحو اليسار، و الـ Parameter السالب يعمل انحراف نحو اليمين.
القيمة ()skewY
تخول هذه القيمة تحويل العنصر عن طريق الإنحراف العمودي، أي أن الإنحراف يتم سوى إلى الأعلى أو إلى الأسفل، و يقحم بين قوسيها Parameter واحد بوحدة قياس 'deg' يعبر عن درجة الإنحراف العمودي، بحيث أن الـ Parameter الموجب يعمل انحراف نحو الأعلى، و الـ Parameter السالب يعمل انحراف نحو الأسفل.
القيمة ()matrix
تخول هذه لقيمة إنشاء عدة تحويلات مختلفة من التحويلات الثنائية الأبعاد في نفس القيمة، و يقحم داخل قوسيها ستة Parameters بدون وحدات قياس و مفصولة بعلامة Comma :
- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()scaleX'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()skewY'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()skewX'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الرابع نفس ما يقحم في Parameter قيمة '()scaleY'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الخامس نفس ما يقحم في الـ Parameter بالبكسل لقيمة '()translateX'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter السادس نفس ما يقحم في الـ Parameter بالبكسل لقيمة '()translateY'، حيث لديهما نفس التأثير في النتيجة.
و لعمل استدارة يجب على الـ Parameter الأول و الرابع أن يكونا متشابهين كشرط أول، و على الـ Parameter الثاني و الثالث أن يكونا متعاكسين، بمعنى يحتويان على نفس العدد لكن Parameter سالب و الآخر موجب.
القيمة ()perspective
كل عنصر HTML لديه عرض (X) و ارتفاع (Y)، حيث يتواجد في المستوى الذي يتشاركان فيه عرضه و ارتفاعه، و هذا المستوى يكون متطابق مع مستوى الشاشات، تجعل هذه القيمة العنصر يتواجد في حيز ثلاثي الأبعاد، و ذلك بخلق بُعد ثالث ينبثق محوره (Z) من مركز العنصر متعامداً مع مستوى عرض و ارتفاع العنصر، و يقحم بين قوسيها Parameter بقيمة مطلقة أو نسبية غير النسبة المئوية تمثل طول المحور Z بحيث يكون مستوى الشاشات متوازي مع مستوى العنصر، و المسافة التي بينهما هي طول المحور Z، و بالتالي فالحيز الذي بين مستوى الشاشات و مستوى العنصر و ما خلف مستوى العنصر هو الحيز الثلاثي الأبعاد الذي يمكن التعديل على العنصر داخله، و يجب دائماً الأخذ بعين الإعتبار أن إذا لمس العنصر مستوى الشاشات سيختفي.
نموذج يوضح تواجد العنصر في الحيز الثلاثي الأبعاد (Z,Y,X)
القيمة ()rotateX
تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحور X، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة في اتجاه إغلاق جفن العين العلوي ↶، و الـ Parameter السالب يعمل استدارة في اتجاه فتح جفن العين العلوي ↷.
القيمة ()rotateY
تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحور Y، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة عكس اتجاه عقارب ساعة على مستوى أفقي ↺، و الـ Parameter السالب يعمل استدارة في اتجاه عقارب ساعة على مستوى أفقي ↻.
القيمة ()rotateZ
تشبه هذه القيمة القيمة '()rotate' حيث تخول تحويل العنصر عن طريق الإستدارة حول المحور Z، و يُقحَم بين قوسيها Parameter بوحدة قياس 'deg' يعبر عن عدد درجات الإستدارة علماً أن الـ Parameter الموجب يعمل استدارة في اتجاه عقارب الساعة ↻، و الـ Parameter السالب يعمل استدارة عكس اتجاه عقارب الساعة ↺.
القيمة ()rotate3d
تخول هذه القيمة تحويل العنصر عن طريق الإستدارة حول المحاور الثلاث Y ، X و Z، و يقحم بين قوسيها أربع Parameters مفروقة بعلامة Comma :
- يكتب في الـ Parameter الأول عدد بدون وحدات قياس يمثل الدوران حول المحور X، علماً أن العدد الموجب يعمل استدارة في اتجاه إغلاق جفن العين العلوي، و العدد السالب يعمل استدارة في اتجاه فتح جفن العين العلوي.
- يكتب في الـ Parameter الثاني عدد بدون وحدات قياس يمثل الدوران حول المحور Y، علماً أن العدد الموجب يعمل استدارة عكس اتجاه عقارب ساعة على مستوى أفقي، و العدد السالب يعمل استدارة في اتجاه عقارب ساعة على مستوى أفقي.
- يكتب في الـ Parameter الثالث عدد بدون وحدات قياس يمثل الدوران حول المحور Z، علماً أن العدد الموجب يعمل استدارة عكس اتجاه عقارب الساعة، و العدد السالب يعمل استدارة في اتجاه عقارب الساعة.
- يكتب في الـ Parameter الرابع عدد بوحدة القياس 'deg' يمثل درجة الإستدارة.
أما في حالة احتواء الـ Parameters الثلاث على أعداد، فستتم الإستدارة حول المحور المسؤول عليه الـ Parameter الذي يحتوي على أصغر عدد.
القيمة ()translateZ
تخول هذه القيمة تحويل العنصر عن طريق الإزاحة في المحور Z، أي أنها تقرب و تبعد العنصر عن المستوى الشاشة، و يُقحَم بين قوسيها Parameter سواء بالقيم المطلقة أو القيم النسبية، الـ Parameter الموجب يقرب العنصر نحو مستوى الشاشة، أما السالب فيبعد العنصر من مستوى الشاشة.
القيمة ()translate3d
تخول هذه القيمة تحويل العنصر عن طريق الإزاحة في المحاور الثلاث Y ، X و Z، و يقحم بين قوسيها ثلاث Parameters مفصولة بعلامة Comma :
- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()translateX'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()translateY'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()translateZ'، حيث لديهما نفس التأثير في النتيجة.
القيمة ()scaleZ
تخول هذه القيمة تحويل العنصر عن طريق التحجيم في البعد الثالث، أي أنها تكبر أو تصغر أو تعمل تماثل محوري لمسافة طول العنصر في البعد الثالث، لكن يشترط على هذا العنصر أن يكون محوَّلاً مسبقاً بقيمة أخرى للخاصية 'transform' غير القيمة '()perspective'؛ و يقحم بين قوسيها Parameter يضرب في مسافة طول العنصر في البعد الثالث ليكبرها أو يصغرها أو يعمل لها تماثل محوري، علماً أن الـ Parameter التلقائي هو '1'، بمعنى أكبر من 1 يعمل تكبير، و بين 1 و 0 يعمل تصغير، و الـ Parameter السالب يعمل تماثل محوري.
القيمة ()scale3d
تخول هذه القيمة تحويل العنصر عن طريق التحجيم في الأبعاد الثلاث Y ، X و Z، و يقحم بين قوسيها ثلاث Parameters مفصولة بعلامة Comma :
- يقحم في الـ Parameter الأول نفس ما يقحم في Parameter قيمة '()scaleX'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثاني نفس ما يقحم في Parameter قيمة '()scaleY'، حيث لديهما نفس التأثير في النتيجة.
- يقحم في الـ Parameter الثالث نفس ما يقحم في Parameter قيمة '()scaleZ'، حيث لديهما نفس التأثير في النتيجة.
القيمة ()matrix3d
تخول هذه القيمة إنشاء عدة تحويلات مختلفة من التحويلات الثلاثية الأبعاد بنفس القيمة، و يقحم داخل قوسيها ستة عشر Parameters بدون وحدات قياس و مفصولة بعلامة Comma، يمكن الإستعانة بآداة تمكّن من إيجاد القيمة المناسبة للتحويلات الثلاثية الأبعاد، و تسمى هذه الآداة بـ Matrix3D Generator، و توجد في هذه الصفحة. (يقدّم الحيز الزمني من 01:07:40 إلى 01:13:41 في الفيديو التوضيحي للدرس كيفية عمل هذه الآداة بالتفصيل)
القيم الشاملة
تقبل الخاصية 'transform' من القيم الشاملة قيمتين ألا و هما :
- 'inherit' : تورّث للعنصر التحويلات من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية، و التي هي 'none'.
يمكن إقحام أكثر من قيمة في الخاصية 'transform'، و ذلك بإقحام جميع القيم المراد تحويل بها العنصر في قيمة الخاصية 'transform'، و لا يهم إن تم تفرقة القيم بفراغ من نوع Space أو عدم تفرقتها
الفيديو التوضيحي للدرس
الخاصية PERSPECTIVE
تشبه الخاصية 'perspective' القيمة '()perspective' من ناحية التأثير، حيث يقحم في قيمتها نفس ما يقحم بين قوسي قيمة '()perspective'، إلا أن ماهية هذه الأخيرة قيمة، و الأخرى خاصية، دائماً تقحم الخاصية 'perspective' في العنصر المحتوي للعنصر المراد تحويله بتقنية Transformation ناشئة عيناً افتراضية في محوره Z تنتمي إلى مستوى الشاشات، حيث ترى هذه العين الإفتراضية العنصر في الحيز الثلاثي الأبعاد، قيمتها التلقائية هي 'none' حيث تمنع هذه القيمة تفعيل 3D في العناصر المحتواة داخل العنصر المقحمة في كوده.
تقبل الخاصية 'perspective' من القيم الشاملة قيمتين ألا و هما :
- 'Inherit' : تورث للعنصر المحتوي للعناصر المراد تحويلها بتقنية Transformation طول البعد الثالث من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية PERSPECTIVE-ORIGIN
تُحدد الخصية 'perspective-origin' من أي نقطة في مستوى الشاشات ترى العين الإفتراضية العنصر المحوَّل بتقنية Transformation، أي أنها هي المسؤولة عن تحديد مكان العين الإفتراضية في مستوى الشاشات، و لا تعمل الخاصية إلا بتواجد الخاصية 'perspective' في نفس الكود المقحمة داخله، تقحم في قيمة الخاصية 'perspective-origin' قيمتين بالقيم المطلقة أو القيم النسبية أو الكلمات المفتاحية علماً أن قيمتها التلقائية هي %50 %50 :
• القيمة التي في اليسار هي المسؤولة عن الوضعية الأفقية للعين الإفتراضية، فإذا كانت أصغر من %50 أو سالبة في القيم المطلقة ستزاح العين الإفتراضية يساراً، و إذا كانت أكبر من %50 أو موجبة في القيم المطلقة ستزاح العين الإفتراضية يميناً، و لديها من الكلمات المفتاحية ثلاثاً و هم :
- 'center' : تضع العين الإفتراضية في المنتصف الأفقي.
- 'left' : تضع العين الإفتراضية في اليسار.
- 'right' : تضع العين الإفتراضية في اليمين.
• القيمة التي في اليمين هي المسؤولة عن الوضعية العمودية للعين الإفتراضية، فإذا كانت أصغر من %50 أو سالبة في القيم المطلقة ستزاح العين الإفتراضية إلى الأعلى، و إذا كانت أكبر من %50 أو موجبة في القيم المطلقة ستزاح العين الإفتراضية إلى الأسفل، و لديها من الكلمات المفتاحية ثلاثاً و هم :
- 'center' : تضع العين الإفتراضية في المنتصف العمودي.
- 'top' : تضع العين الإفتراضية في الأعلى.
- 'bottom' : تضع العين الإفتراضية في الأسفل.
تقبل الخاصية 'perspective-origin' من القيم الشاملة قيمتين ألا و هما :
- 'inherit' : تورّث للعنصر وضعية العين الإفتراضية من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية TRANSFORM-ORIGIN
تخول هذه الخاصية إمكانية تحديد مكان النقطة في الحيز الثلاثي الأبعاد التي منها يتم تحويل العنصر عبر التحويلات الأربع لتقنية Transformation، و لا تعمل الخاصية إلا بتواجد الخاصية 'transform' في نفس الكود المقحمة داخله، تقحم في قيمة الخاصية 'transform-origin' ثلاث قيم بالقيم المطلقة أو القيم النسبية أو الكلمات المفتاحية علماً أن قيمتها التلقائية هي 0 %50 %50 :
• القيمة الأولى هي المسؤولة عن الوضعية الأفقية لنقطة التحويل علماً أن القيمة 0 تجعل نقطة التحويل في أقصى يسار المنتصف الأفقي للعنصر، فإذا كانت سالبة ستزاح نقطة التحويل يساراً، و إذا كانت موجبة ستزاح نقطة التحويل يميناً، و لديها من الكلمات المفتاحية ثلاثاً و هم :
- 'center' : تضع نقطة التحويل في وسط المنتصف الأفقي للعنصر.
- 'left' : تضع نقطة التحويل في يسار المنتصف الأفقي للعنصر.
- 'right' : تضع نقطة التحويل في يمين المنتصف الأفقي للعنصر.
• القيمة الثانية هي المسؤولة عن الوضعية العمودية لنقطة التحويل علماً أن القيمة 0 تجعل نقطة التحويل في أعلى المنتصف العمودي للعنصر، فإذا كانت سالبة ستزاح نقطة التحويل إلى الأعلى، و إذا كانت موجبة ستزاح نقطة التحويل إلى الأسفل، و لديها من الكلمات المفتاحية ثلاثاً و هم :
- 'center' : تضع نقطة التحويل في المنتصف العمودي للعنصر.
- 'top' : تضع نقطة التحويل في أعلى المنتصف العمودي للعنصر.
- 'bottom' : تضع نقطة التحويل في أسفل المنتصف العمودي للعنصر.
• القيمة الثالثة هي المسؤولة عن وضعية نقطة التحويل في البعد الثالث، علماً أن القيمة 0 تجعل نقطة التحويل في تقاطع منتصفات العنصر، و يُستغنى عن هذه القيمة في حالة تواجدها في كود عنصر محوَّل بتقنية Transformation الثنائية الأبعاد حيث تقحم سوى القيمتين أعلاه.
تقبل الخاصية 'transform-origin' من القيم الشاملة قيمتين ألا و هما :
- 'inherit' : تورّث للعنصر وضعية نقطة التحويل من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية TRANSFORM-STYLE
تعتبر الخاصية 'transform-style' الخاصية المسؤولة عن الحفاظ على بنية 3D للعناصر المحولة بتقنية Transformation الثلاثية الأبعاد، بمعنى في حالة تَشاركها الوضعية، تجعلها الخاصية 'transform-style' متداخلة ببعضها البعض في نفس الحيز عوضاً من أن يكون مطبَّق عليها تأثير الخاصية 'z-index' التلقائي، تقحم دائماً الخاصية 'transform-style' في العنصر المحتوي للعناصر الهدف، و لديها قيمتين خاصتين ألا و هما :
• القيمة 'flat' : هي قيمتها التلقائية حيث تلغي تأثير الحفاظ على بنية 3D للعناصر المحوَّلة بتقنية Transformation الثلاثية الأبعاد و المتشاركة الوضعية.
• القيمة 'preserve-3d' : تحافظ على بنية 3D للعناصر المحوَّلة بتقنية Transformation الثلاثية الأبعاد و المتشاركة الوضعية.
تقبل الخاصية 'transform-style' من القيم الشاملة قيمتين ألا و هما :
- 'inherit' : تورّث للعنصر الحفاظ على بنية 3D من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.
الخاصية BACKFACE-VISIBILITY
تخول هذه الخاصية إمكانية إظهار أو إخفاء الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد، لديها قيمتين خاصتين ألا وهما :
• القيمة 'visible' : هي قيمتها التلقائية حيث تترك الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد ظاهرة.
• القيمة 'hidden' : تقوم بإخفاء الواجهة الخلفية للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد.
تقبل الخاصية 'backface-visibility' من القيم الشاملة قيمتين ألا و هما :
- 'inherit' : تورّث للعنصر المحوَّل بتقنية Transformation الثلاثية الأبعاد إخفاء واجهته الخلفية من العنصر المحتوي له.
- 'initial' : ترجع الخاصية إلى قيمتها التلقائية.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس