تسمح لنا التحويلات ثنائية الأبعاد في CSS بتنفيذ بعض عمليات التحويل الأساسية في الفضاء ثنائي الأبعاد، مثل التحرك أو التدوير أو القياس أو الالتواء وما إلى ذلك. تشبه العناصر المحولة العناصر ذات الموضع المطلق ولن تؤثر على العناصر المحيطة، ولكن يمكن دمجها مع تداخل العناصر المحيطة، والفرق هو أن العنصر المحول سيظل يشغل المساحة قبل التحويل على الصفحة.
دعونا نقدم التحويل ثنائي الأبعاد:
1. نقل الترجمة ()
وفقًا للمعلمات المقدمة بواسطة المواضع اليسرى (المحور السيني) والأعلى (المحور ص)، فإن الانتقال من موضع العنصر الحالي يمكن أن يغير موضع العنصر على الصفحة، تمامًا مثل تحديد الموضع.
1. القواعد:
تحويل: ترجمة (س، ص)؛
أو يمكنك كتابتها بشكل منفصل
تحويل:translateX(n);تحويل:translateY(n);
2. النقاط الرئيسية:
(1) تحديد الحركة في التحويل ثنائي الأبعاد، وتحريك العناصر على طول المحورين X وY؛
(2) أكبر ميزة للترجمة هي أنها لن تؤثر على موضع العناصر الأخرى؛
(3) نسبة الترجمة نفسها مرتبطة بعنصر الترجمة الخاص بها (50%، 50%)؛
(4) ليس له أي تأثير على العلامات المضمنة؛
مثال:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);</style></head><body ><div></div></body></html>نتائج التشغيل:
2. تدوير تدوير ()
يقوم أسلوب التدوير () بتدوير عنصر في اتجاه عقارب الساعة بدرجة معينة. يُسمح بالقيم السالبة، مما يؤدي إلى تدوير العنصر عكس اتجاه عقارب الساعة.
بناء الجملة: transfrom:rotate (درجة الدوران)
النقاط الرئيسية:
تدوير (درجة)، الوحدة درجة على سبيل المثال: تدوير (45 درجة)؛
إذا كانت الزاوية موجبة فهي في اتجاه عقارب الساعة، وإذا كانت سالبة فهي عكس اتجاه عقارب الساعة؛
افتراضيًا، النقطة المركزية في اتجاه عقارب الساعة هي النقطة المركزية للعنصر؛
مثال:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);</style></head> <body><div></div></body></html>نتائج التشغيل:
3. تحويل نقطة مركزية ثنائية الأبعاد - أصل التحويل:
القواعد:
أصل التحويل:xy;
النقاط الرئيسية:
(1) لاحظ أن x وy مفصولتان بمسافات؛
(2) النقطة المركزية الافتراضية لـ xy هي النقطة المركزية للعنصر (50% 50%)؛
(3) يمكنك أيضًا تعيين وحدات البكسل أو أسماء الاتجاه لـ xy (يمين يسار وسط أسفل أعلى)؛
4. مقياس التكبير ()
في طريقة المقياس () ، يزيد حجم العنصر أو ينقص، اعتمادًا على معلمات العرض (المحور السيني) والارتفاع (المحور الصادي):
(1) تعديل حجم العنصر، تكبير العنصر أو تصغيره
(2) إذا كان رقما سالبا فإنه معكوس.
(3) يكون تنسيق بناء الجملة للوظيفة كما يلي:
مقياس (سكس، سي)
حيث يمثل sx نسبة القياس في الاتجاه الأفقي، ويمثل sy نسبة القياس في الاتجاه الرأسي. بالإضافة إلى ذلك، يمكن حذف المعلمة sy، وقيمتها الافتراضية تساوي sx.
مثال:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);</style></head><body>< div></div></body></html>نتائج التشغيل:
5. انحراف ()
يحتوي على قيمتي معلمة، تشير إلى زاوية ميل المحور X والمحور Y على التوالي. إذا كانت المعلمة الثانية فارغة، فستكون القيمة الافتراضية 0. وتعني المعلمة السالبة الميل في الاتجاه المعاكس.
(1) skewX(<angle>); يعني الإمالة فقط في المحور السيني (الاتجاه الأفقي).
(2) skewY(<angle>); يعني إمالة المحور Y فقط (الاتجاه العمودي).
(3) جعل العناصر تميل في اتجاهات مختلفة.
(4) الانحراف (أ) يساوي الانحراف (أ،0)
(5) انحراف (س، ص)
(6) درجة زاوية الوحدة
مثال:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style>< /head><body><div></div></body></html>نتائج التشغيل:
6. المصفوفة ()
يمكن اعتبار وظيفة المصفوفة () اختصارًا لعدة وظائف: الانحراف () والمقياس () والتدوير () والترجمة (). يمكن تعريف جميع عمليات التحويل ثنائية الأبعاد في نفس الوقت من خلال وظيفة المصفوفة (). تنسيق بناء الجملة للوظيفة كما يلي:
مصفوفة (أ، ب، ج، د، تكساس، تاي)
تتوافق المعلمات الستة في الدالة Matrix() مع ScaleX() وskewY() وskewX() وscaleY() وtranslatorX() وtranslatorY() على التوالي ، مثل:
ترجمة (tx، ty) = مصفوفة (1،0،0،1، tx، ty)؛:
حيث tx وty هي قيم الترجمة الأفقية والرأسية؛
تدوير(أ)=مصفوفة(cos(a),sin(a),-sin(a),cos(a),0,0);
حيث a هي قيمة الدرجة. يمكنك عكس التدوير عن طريق تبديل قيم sin(a) و-sin(a)؛
مقياس(sx,sy)=matrix(sx,0,0,sy,0,0);
حيث sx وsy هما قيمتا القياس الأفقي والرأسي؛
skew(ax,ay)=matrix(1,tan(ay),tan(ay),1,0,0);
حيث ax و ay هما القيمتان الأفقية والرأسية بالدرجة.
مثال:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;float:left;}.one{transform:matrix(0.866,0.5, -0.5,0.866,0,0);}.اثنان{margin-left:35px;transform:matrix(0.586,0.8,-0.8,0.686,0,0);}.ثلاثة{margin-left:40px;margin- أعلى: 25px;تحويل:مصفوفة(0.586,0.8,-0.8,0.866,0,0);}.أربعة{تحويل:مصفوفة(0.586,0.8,-0.8,0.586,40,30);</style>< /head><body><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>نتائج التشغيل:
يتم دمج طريقة المصفوفة () وطريقة التحويل ثنائية الأبعاد في طريقة واحدة.
تحتوي طريقة المصفوفة على ستة معلمات، بما في ذلك وظائف التدوير والقياس والحركة (الترجمة) والإمالة.
استخدم مصفوفة للتعبير عن مصفوفة مبلغ التحويل (a،b،c،d،x،y)
●acx
●bdy
●0 0 1
دعونا نتدرب على ذلك باستخدام حالة محددة:
الرمز هو كما يلي:
<!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>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;position:relative;left:0; color:#FFF;/*transform-origin:lefttop;*/.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform :translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}. الساعة {العرض: 400 بكسل ؛ الارتفاع: 400 بكسل ؛ نصف قطر الحدود: 50٪ ؛ لون الخلفية: # Faa ؛ الموضع: نسبي ؛}. عصا {العرض: 4 بكسل ؛ الارتفاع: 200 بكسل ؛ لون الخلفية: أزرق ؛ الموضع: مطلق ؛ اليسار: 198 بكسل ؛ الأعلى: 0 ؛ الانتقال: all12slinear ؛ أصل التحويل: centerbottom ؛ }.stickshort {width: 8px ؛ الارتفاع: 100px ؛ لون الخلفية: rgb (142،21،248) ؛ الموضع: مطلق ؛ اليسار: 196 بكسل ؛ الأعلى :100px;الانتقال:all12slinear;مصدر التحويل:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);} </style></head><body><!--<div></div><div></div>--><div><div></div><div></div>< /div></body></html>نتائج التشغيل:
