CSS3 Modules

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

آخر تحيين: 16-10-2014

CSS3 transitions css3 التحويلات ثنائية الأبعاد


تعاملنا في الدرس السابق مع التحويلات ثنائية الأبعاد ، و التي ترتكز على محورين ، محور العرض "X" و محور الطول "Y" . لتحويل العناصر في فضاء ثلاثي الأبعاد ، سنضيف محورا ثالثا ، و هو محور "Z" الذي يمنحنا التحكم في عمق العناصر كما في طولها وعرضها .
في مجال الويب ، ألفنا الإشتغال في فضاء ثنائي الأبعاد . حيث أي صفحة ممثلة بمحورين ، محور X الأفقي و محور Y العمودي . النقطة الأصلية التي تمثل تقاطع المحورين مبدئيا توجد أعلى يسار الصفحة . إذا حركنا العناصر إلى اليسار فهي تأخذ قيما سلبية و قيما إيجابية على يمين محور X . نفس الشيء على محور Y ، التحرك إلى أعلى يأخذ قيما سلبية و إيجابية إلى أسفل الصفحة . بالنسبة للفضاء الثلاثي الأبعاد ، و المُمثّل بالمحور Z . هذا المحور يمثل مسطحا يتجه نحو المشاهد ، و يمثل العمق ، القيم الإيجابية تُحرك العنصر في اتجاهكم و تجعله أقرب إليكم و السلبية تحركه بعيدا عنكم .

سنتعرف على مجموعة من الخاصيات الجديدة ، أبدء بعرضها عليكم

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
transform36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
10.0
transform-origin
(بثلاث قيم)
36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
10.0
transform-style36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
11.0
perspective36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
10.0
perspective-origin36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
10.0
backface-visibility36.0
-webkit- 12.0
16.0
-moz- 10.0
-webkit- 4.023.0
-webkit- 15.0
10.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات

CSS3 3D transform

الدوال التي سنستعملها مع الخاصية transform ، هي تقريبا نفسها التي تعاملنا معها سابقا ، مع إضافة البعد الثالث :

  • rotateX()
  • rotateY()
  • rotateZ()
  • scaleZ()
  • translateZ()

rotateX(a)

تتيح الدالة rotateX() دوران العنصر حول المحور السيني "X" بدون التأثير على حجمه . تحدد القيمة بدرجة زاوية الدوران . إذا كانت القيمة إيجابية يتم الدوران في اتجاه عقارب الساعة ، و العكس إذا كانت سلبية .
مكان أو نقطة الدوران يتم تحديدها باستعمال الخاصية transform-origin

.rotation-x {
  -webkit-transform:rotateX(140deg);
  -moz-transform:   rotateX(140deg);
  transform:        rotateX(140deg);
 }
مشاهدة النتيجة

rotateY(a)

تتيح الدالة rotateY() دوران العنصر حول المحور الصادي "Y" بدون التأثير على حجمه . تحدد القيمة بدرجة زاوية الدوران . إذا كانت القيمة إيجابية يتم الدوران في اتجاه عقارب الساعة ، و العكس إذا كانت سلبية .
مكان أو نقطة الدوران يتم تحديدها باستعمال الخاصية transform-origin

.rotation-y {
  -webkit-transform:rotateY(140deg);
  -moz-transform:   rotateY(140deg);
  transform:        rotateY(140deg);
 }
مشاهدة النتيجة

rotateZ(a)

تتيح الدالة rotateZ() دوران العنصر حول محور "Z" بدون التأثير على حجمه . تحدد القيمة بدرجة زاوية الدوران . إذا كانت القيمة إيجابية يتم الدوران في اتجاه عقارب الساعة ، و العكس إذا كانت سلبية .
مكان أو نقطة الدوران يتم تحديدها باستعمال الخاصية transform-origin

.rotation-z {
  -webkit-transform:rotateZ(140deg);
  -moz-transform:   rotateZ(140deg);
  transform:        rotateZ(140deg);
 }
مشاهدة النتيجة

rotate3d(x,y,z,a)

تتيح الدالة rotate3d() دوران العنصر حول محور مُحدّد بدون التأثير على حجمه . تحدد القيمة بدرجة زاوية الدوران . إذا كانت القيمة إيجابية يتم الدوران في اتجاه عقارب الساعة ، و العكس إذا كانت سلبية .
في فضاء ثلاثي الأبعاد ، يمكن تحديد محور الدوران بالإعتماد على قيم المتجهات a[x,y,z] ، نقطة الدوران يتم تحديدها باستعمال الخاصية transform-origin
x : تُحدّد إحداثيات x للمتجه الذي يمثل محور الدوران
y : تُحدّد إحداثيات y للمتجه الذي يمثل محور الدوران
z : تُحدّد إحداثيات z للمتجه الذي يمثل محور الدوران
a : تمثل درجة زاوية الدّوران .
مثلا :
rotateX(80deg) هي اختزال rotate3d(1,0,0,80deg)
rotateY(80deg) هي اختزال rotate3d(0,1,0,80deg)
rotateZ(80deg) هي اختزال rotate3d(0,0,1,80deg)
للجمع بين الدوال الثلاث في دالة rotate3d() يجب استعمال المصفوفات ، للذين لم يدرسوا المصفوفات في مادة الرياضيات ، يمكنكم نسيان الأمر و ترك هذه الدالة جانبا ، بالنسبة للذين لديهم معارف مسبقة حول الأمر يمكنكم إلقاء نظرة على هذا الرابط . "المقال باللغة الإنجليزية ، رغم ذلك لن يعرقل كثيرا فهمكم للطريقة المتبعة"

.rotation-3d {
  -webkit-transform:rotate3d(0.7, 0.5, 0.7, 80deg);
  -moz-transform:   rotate3d(0.7, 0.5, 0.7, 80deg);
  transform:        rotate3d(0.7, 0.5, 0.7, 80deg);
 }
مشاهدة النتيجة

translate3d()

translateX , translateY و translateZ تقوم كل دالة بتحريك العنصر وفق محورها الخاص . بالنسبة للدالة translateZ لن يظهر تأثيرها على متصفحكم لأننا نشتغل في فضاء ثنائي البعد . يمكننا جمع بين هذه الدوال في دالة واحدة ، هي translate3d(x,y,z)

    .translate-3d {
    -webkit-transform: translate3d(20px, 30px, 10px);
    -moz-transform:    translate3d(20px, 30px, 10px);
    transform:         translate3d(20px, 30px, 10px);
 }

scale3d()

رأينا في الدرس السابق أن الدالتين scaleX و scaleY تأثران على حجم العنصر ، بتكبيره أو تصغيره ، مثلا إذا كان لدينا عنصر بعرض 100px و طبقنا عليه scaleX(2) سيصبح بعرض 200px.
بالنسبة للدالة scaleZ ، تعطينا تصرفا مختلفا نوعا ما ، ما دمنا نشتغل في فضاء ثنائي الأبعاد ليس له أي عمق ، رغم أنها دالة ثلاثية الأبعاد إلا أنها تتصرف تقريبا مثل translateZ . إذ تظهر لنا كأنها تقوم بتحريك العنصر على محور Z .
يمكننا جمع قيم scale في دالة مختصرة و هي scale3d . في المثال أسفله نفس التأثير سيطبق على العنصرين div1 و div2

.div1 {
   transform: scaleX(2) scaleY(1.5) scaleZ(0.75);
}

.div2 {
   transform: scale3d(2,1.5,0.75);
}

CSS3 Perspective

لتفعيل الفضاء الثلاثي الأبعاد ، يحتاج العنصر إلى منظور perspective
في فضاء ثلاثي الأبعاد ، تقوم perspective بالتأثير على المسافة التي تفصل المشاهد بالعنصر الذي يراه . أي بين مُسطّح المستوى z=0 و المشاهد . كلما كانت المسافة أقرب إلا و ازدادت التأثيرات البصرية . و كلما ابتعد المشاهد عن مسطح z إلا وكانت النتائج خادعة . مثلا أي قيمة أدنى من 200 بيكسل ستعطي المشاهد تأثيرات جد بارزة ، أما إذا بالغنا في رفع القيمة ، مثلا 900 بيكسل ستبدو النتائج أقل تأثيرا .
يمكننا إضافة perspective بطريقتين : إما استعمالها كدالة مع الخاصية transform :

.perspective-rotate {
    -webkit-transform: perspective(200px) rotateX(45deg);
    -moz-transform:    perspective(200px) rotateX(45deg);
    transform:         perspective(200px) rotateX(45deg);
 }
مشاهدة النتيجة

أو استعمالها كخاصية منفردة

.parent {
   perspective: 200px;
 }
.child {
   transform: rotateX(45deg);
 }

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

<div class="parent">
   <div class="child">العنصر الإبن 1 </div>
   <div class="child">العنصر الإبن 2 </div>
   <div class="child">العنصر الإبن 3 </div>
   <div class="child">العنصر الإبن 4 </div>
</div>
.parent {
  -webkit-perspective:500px;
  -moz-perspective:   500px;
  perspective:        500px;
 }
.child {
   width:100px;height:100px;
   background:rgba(138,200,15,0.8);
   border:1px solid #79af03;
   display:inline-block;
   -webkit-transform:rotateX(30deg);
   -moz-transform:   rotateX(30deg);
   transform:        rotateX(30deg);
 }

جميع الوسوم الأبناء "child" ستأخذ نفس التأثير ، و سيتم رؤيتها من نقطة موحدة كما تبين الصورة أسفله :

أما إذا طبقنا على نفس الوسوم الدالة perspective() ، فكل وسم سيتم التأثير عليه بشكل منفرد ، و ستتم رؤيته من المسافة المتعلقة به ، كما تبين الصورة أسفله :

.child {
   /* ... */
   -webkit-transform:perspective(500px) rotateX(30deg);
   -moz-transform:   perspective(500px) rotateX(30deg);
   transform:        perspective(500px) rotateX(30deg);
 }

CSS3 perspective-origin

بالنسبة للخاصية perspective يمكننا تغيير نقطة المنظور (نقطة التلاشي) . مبدئيا توجد هذه النقطة وسط العنصر الأب ، وتأخذ قيمة : center أو 50% كما رأينا سابقا في الخاصية transform-origin .

.parent {
    -webkit-perspective:500px;
    -moz-perspective:   500px;
    perspective:        500px;

   -moz-perspective-origin:    25% 75%;
   -webkit-perspective-origin: 25% 75%;
   perspective-origin:         25% 75%;
 }

CSS3 transform-style

الخاصية transform-style ، تحدد ما إذا كان الوسم الإبن سيتموضع في فضاء ثلاثي الأبعاد ، أم سيتم تسطيحه في فضاء الوسم الأب . تأخذ الخاصية ثلاث قيم : flat|preserve-3d|inherit
flat : يتم تموضع الوسم الإبن في مسطح الوسم الأب
preserve-3d : يتم تموضع الوسم الإبن في فضاء ثلاثي الأبعاد

div {
  -webkit-transform: rotateY(45deg);
  -moz-transform: rotateY(45deg);
  transform: rotateY(45deg);

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

CSS3 backface-visibility

تُحدد هذه الخاصية ما إذا كان يجب إخفاء أو إظهار الوجه الخلفي للعنصر أثناء دورانه .
تأخذ الخاصية القيم التالية : visible|hidden|initial|inherit

.box1 {
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);

  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
 }
مشاهدة النتيجة

تطبيق : إنشاء مكعب

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

<div class="wrapper">
  <h2>perspective: 350px;</h2>
  <div class="cube persepective350">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
</div>

<div class="wrapper">
  <h2>perspective: 500px;</h2>
  <div class="cube persepective500">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="right">3</div>
    <div class="left">4</div>
    <div class="top">5</div>
    <div class="bottom">6</div>
  </div>
</div>
h2 {margin-bottom:60px;font-size:20px;}
.persepective350 {
   -webkit-perspective: 300px;
   perspective: 350px;
}
.persepective500 {
   -webkit-perspective: 500px;
   perspective: 500px;
}

/* العلبة التي تحتوي المكعب */
 .wrapper {
   width: 200px;
   height: 200px;
   margin-left: 50px;
   display :inline-block;
}
/* نمط المكعب */
.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;  
  perspective-origin: 125% 125%;
  -webkit-perspective-origin: 125% 125%;   
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* نمط وجوه المكعب */
.cube div{
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-size: 60px;
  text-align: center;
 }
/* الوجه الأمامي */
.front {
  transform: translateZ(50px);
  -webkit-transform: translateZ(50px);
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
 }
/* الوجه الخلفي */
div.back {font-size: 30px;}
.back {
  transform: rotateY(180deg) translateZ(50px);
  -webkit-transform: rotateY(180deg) translateZ(50px);
  background-color: rgba(215, 215, 2, 1);
  color: #012f03;
 }
/* الوجه الأيمن */
.right {
  transform: rotateY(90deg) translateZ(50px);
  -webkit-transform: rotateY(90deg) translateZ(50px);
  background-color: rgba(0, 0, 183, 0.8);
  color: #020852;
 }
/* الوجه الأيسر */
.left {
  transform: rotateY(-90deg) translateZ(50px);
  -webkit-transform: rotateY(-90deg) translateZ(50px);
  background-color: rgba(200, 0, 0, 0.7);
  color:#75021a;
 }
/* الوجه العلوي */
.top {
  transform: rotateX(90deg) translateZ(50px);
  -webkit-transform: rotateX(90deg) translateZ(50px);
  background-color: rgba(0, 0, 0, 0.7);
  color:silver;
 }
/* الوجه السفلي */
.bottom {
  transform: rotateX(-90deg) translateZ(50px);
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  background-color: rgba(163, 3, 163, 0.9);
  color:#4e0239;
 }
مشاهدة النتيجة