تحويلات 3D CSS3

يُمكن للتحويل الثلاثي الأبعاد في CSS3 تحويل العناصر في الفضاء الثلاثي الأبعاد.

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

باستخدام وظيفة التحويل الثلاثي الأبعاد في CSS3، يمكنك تنفيذ عمليات تحويل أساسية للعناصر في الفضاء الثلاثي الأبعاد، مثل الحركة، الدوران، التكبير والتكوين.

العناصر التي تم تحويلها لن تؤثر على العناصر المحيطة بها، ولكن يمكن أن تُ重叠 مثل العناصر الموجودة في التثبيت النسبي. ولكن، العناصر التي تم تحويلها في موقفها الافتراضي (غير المُتحول) ستأخذ مساحة في التخطيط.

استخدام CSS Transforms و وظيفة Transform() للتحويل

استخدم خاصية transform CSS3 لتحويل نظام الكoordinates المستخدم من قبل العنصر للتطبيق تأثيرات التحويل.

يصف هذا الجزء وظائف التحويلات الثلاثية الأبعاد:

وظيفة translate3d()

تقوم وظيفة rotation3d() بتحويل العنصر حول محور [x, y, z] في الفراغ الثلاثي بزاوية معينة حول نقطة مرجع. يمكن كتابتها كـ rotate(vx, vy, vz, angle).

مثال

.container {
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective: 500px;
　　　　border: 4px solid #e5a043;
　　　　background: #fff2dd;
}
.transformed　{
　　　　-webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
　　　　transform: translate3d(25px, 25px, 50px);　
}

تقوم الوظيفة translate3d(25px, 25px, 50px) بتحويل الصورة باتجاه الصف الإيجابي 25 بكسل باتجاه الصف الأصلي، وباتجاه الصف Z الإيجابي 50 بكسل.

استخدم تحويلات 3D نظام الكoordinates الثلاثي الأبعاد، ولكن الحركة في اتجاه Z قد لا تكون واضحة دائمًا، لأن العناصر موجودة في مستوى ثنائي الأبعاد (مستوى) وليس لديها عمق.

من خلال جعل العناصر الأعلى على محور Z (أي العناصر القريبة من المشاهد تبدو أكبر، والعناصر البعيدة تبدو أصغر)، يمكنك استخدام خصائص CSS perspective و perspective-origin لإضافة إحساس العمق إلى المشهد.

وظيفة rotate3d()

تقوم وظيفة rotate3d() بتحويل العنصر حول محور [x, y, z] في الفراغ الثلاثي بزاوية معينة. يمكن كتابتها كـ rotate(vx, vy, vz, angle).

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: rotate3d(0, 1, 0, 60deg);　
}

تقوم الوظيفة rotate3d(0, 1, 0, 60deg) بتحويل الصورة حول مقياس x،y،z بزاوية 60 درجة. يمكنك أيضًا استخدام القيم السلبية لتحويل العنصر باتجاه العكس.

وظيفة scale3d()

وظيفة scale3d() تغيير حجم العنصر. يمكن كتابتها كـ scale(sx, sy, sz). إلا إذا تم دمجها مع وظائف تحويل أخرى مثل الدوران والمنظور، فإن تأثيرها غير ملحوظ، كما هو موضح في المثال التالي.

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#6486ab;
　　　　background:　#e9eef3;
}
.transformed　{
　　　　-webkit-transform:　scale3d(1,　1,　2)　rotate3d(1,　0,　0,　60deg);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　scale3d(1,　1,　2)　rotate3d(1,　0,　0,　60deg);　
}

وظيفة scale3d(1, 1, 2) تضخيم العنصر على محور Z، وظيفة rotate3d(1, 0, 0, 60deg) تدور الصورة 60 درجة على محور X.

وظيفة matrix3d()

وظيفة matrix3d() يمكنها تنفيذ جميع التحولات ثلاثية الأبعاد في وقت واحد، مثل التغير في المكان، الدوران والتحجيم. إنها تأخذ تحويلًا من 4×4.المعادلةبشكل يحتوي على 16 معلمة.

هذا مثال على تنفيذ تحويلات ثلاثية الأبعاد باستخدام وظيفة matrix3d().

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#d14e46;
　　　　background:　#fddddb;
}
.transformed　{
　　　　-webkit-transform:　matrix3d(0.359127,　-0.469472,　0.806613,　0,　0.190951,　0.882948,　0.428884,　0,　-0.913545,　0,　0.406737,　0,　0,　0,　0,　1);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　matrix3d(0.359127,　-0.469472,　0.806613,　0,　0.190951,　0.882948,　0.428884,　0,　-0.913545,　0,　0.406737,　0,　0,　0,　0,　1);　
}

لكن عند تنفيذ عدة تحولات في وقت واحد، يكون من المريح استخدام وظيفة تحويل واحدة وتسجيلها بالترتيب، مثلما هو موضح أدناه:

.container{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　300px;
　　　　border:　4px　solid　#a2b058;
　　　　background:　#f0f5d8;
}
.transformed　{
　　　　-webkit-transform:　translate3d(0,　0,　60px)　rotate3d(0,　1,　0,　-60deg)　scale3d(1,　1,　2);　/*　Chrome,　Safari,　Opera　*/
　　　　transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2);　
}

ميزات التحويلات 3D

يقدم الجدول أدناه تقريراً مختصراً عن جميع ميزات التحويلات 3D.