تحويل CSS ثلاثي الأبعاد في CSS، بالإضافة إلى التحويل ثنائي الأبعاد للعناصر الموجودة على الصفحة، يمكنك أيضًا إجراء تحويل ثلاثي الأبعاد على عناصر الكائن (فكر في الصفحة كمساحة ثلاثية الأبعاد لتحريك العناصر وتدويرها وقياسها وإمالتها على الصفحة وما إلى ذلك) .). مثل التحويلات ثنائية الأبعاد، لا تؤثر التحويلات ثلاثية الأبعاد على العناصر المحيطة ويمكن أن تتداخل مع عناصر أخرى. ومع ذلك، سيظل العنصر المحول يشغل مساحة في موضعه الافتراضي (قبل التحويل).
نظام الإحداثيات ثلاثي الأبعاد
دعونا أولاً نفهم نظام الإحداثيات ثلاثي الأبعاد، حيث يضيف ما يسمى بنظام الإحداثيات ثلاثي الأبعاد المحور z إلى نظام الإحداثيات ثنائي الأبعاد الأصلي، وبالتالي يشكل مساحة ثلاثية الأبعاد، كما هو موضح في الشكل أدناه:
①محور x: أفقيًا إلى اليمين ملاحظة: الجانب الأيمن من x قيمة موجبة، والجانب الأيسر قيمة سالبة
②المحور y: عموديًا لأسفل ملاحظة: y له قيم موجبة أدناه وقيم سالبة أعلاه.
③المحور Z: شاشة عمودية ملاحظة: القيم الموجبة نحو الخارج والقيم السالبة نحو الداخل
خصائص التحويل
طريقة التحويل ثلاثي الأبعاد
1.translate3d()
يتم استخدام وظيفة Translator3d () لتحريك موضع عنصر في مساحة ثلاثية الأبعاد. وتتمثل خاصية هذا التحويل في تحديد إزاحة العنصر في كل اتجاه (المحور X، المحور Y، المحور Z) من خلال ثلاثة. إحداثيات ناقلات الأبعاد. تنسيق بناء الجملة للوظيفة كما يلي:
ترجمة 3D (تكساس، تاي، تز)
وصف المعلمة كما يلي:
(1) tx: يمثل المسافة التي يتحركها العنصر في الاتجاه الأفقي (المحور السيني)؛
(2) ty: يمثل المسافة المنقولة في الاتجاه الرأسي (المحور Z) للعنصر؛
(3) tz: يشير إلى المسافة التي يتحركها العنصر على المحور Z ولا يمكن استخدام قيم النسبة المئوية لهذه المعلمة.
2. ترجمةZ ()
يتم استخدام الدالة TranslationZ () لتحريك العناصر على طول المحور Z لنظام الإحداثيات ثلاثي الأبعاد. تنسيق بناء الجملة للوظيفة كما يلي:
ترجمةZ(تز);
يتم استخدام المعلمة tz لتعيين المسافة التي يتحركها العنصر على المحور Z.
نصيحة: TranslateZ(tz); يعادل اختصار Translator3d(0, 0, tz);.
3.rotate3d()
يتم استخدام وظيفة Rotate3d () لتعيين زاوية دوران العنصر على طول المحور X أو المحور Y أو المحور Z. ستقوم هذه الوظيفة بتدوير العنصر على طول المحور الثابت فقط ولن تشوه العنصر. تنسيق بناء الجملة للدالة Rotate3d() كما يلي:
تدوير3d(س، ص، ض، أ)
وصف المعلمة كما يلي:
x: قم بتعيين إحداثيات المحور السيني لمحور الدوران؛
y: قم بتعيين إحداثيات المحور Y لمحور الدوران؛
z: قم بتعيين إحداثيات المحور Z لمحور الدوران؛
أ: اضبط زاوية دوران العنصر، الزاوية الموجبة تعني الدوران في اتجاه عقارب الساعة، والزاوية السالبة تعني الدوران عكس اتجاه عقارب الساعة.
4.scale3d()
يمكن للوظيفةscale3d() تغيير حجم (قياس) العناصر. تنسيق بناء الجملة للوظيفة كما يلي:
مقياس 3D (سكس، سي، سز)
وصف المعلمة كما يلي:
sx: يمثل نسبة تحجيم العنصر في اتجاه المحور السيني؛
sy: يمثل نسبة تحجيم العنصر في اتجاه المحور Y؛
sz: يشير إلى نسبة تحجيم العنصر في اتجاه المحور Z.
5.matrix3d()
الدالة Matrix3d() تشبه إلى حد كبير الدالة Matrix() التي تعلمناها سابقًا، لكن الدالة Matrix3d() يمكنها استخدام مصفوفة 4 × 4 لوصف تحويل ثلاثي الأبعاد (3D). يمكن إجراء جميع عمليات التحويل ثلاثية الأبعاد في وقت واحد من خلال وظيفة Matrix3d () ويكون تنسيق بناء الجملة للوظيفة كما يلي:
مصفوفة3d(a1,b1,c1,d1,a2,b2,c2,d2,a3,b3,c3,d3,a4,b4,c4,d4)
وصف المعلمة كما يلي:
a1، b1، c1، d1، a2، b2، c2، d2، a3، b3، c3، d3، d4: يستخدم لوصف التحولات ثلاثية الأبعاد المختلفة؛
a4، b4، c4: يشير إلى مقدار تحويل العنصر.
مثال:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>مستند</title><style>.box1{perspective:500px;}.box{position:relative;width:200px;height:200px;margin:100pxauto;transition:all2s;/*دع الصندوق الفرعي يحتفظ بـ بيئة مساحة ثلاثية الأبعاد*/transform-style:preserve-3d;}.box:hover{transform:rotatey(60deg);}.boxdiv{position:absolute;top:0;left:0;width:100%;height:100 %; لون الخلفية: وردي;}.boxdiv:last-child{background-color:aquamarine;transform:rotateX(60deg);</style></head><body><div><div><div> </ div><div></div></div></div></body></html>نتائج التشغيل:
