"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > كيف يمكنني قلب النص أفقياً ورأسيًا باستخدام تحويلات CSS؟

كيف يمكنني قلب النص أفقياً ورأسيًا باستخدام تحويلات CSS؟

نشرت في 2025-02-03
تصفح:639

How can I flip text horizontally and vertically using CSS transformations?

أحد التحول الشائع هو النسخ المتطابق ، المعروف أيضًا باسم التقليب. يمكن تحقيق هذا التأثير باستخدام خاصية CSS بسيطة. Scale (-1 ، 1) ؛

-WebKit-transform: Scale (-1 ، 1) ؛

-O-transform: Scale (-1 ، 1) ؛

-MS-Transform: Scale ( -1 ، 1) ؛

التحويل: المقياس (-1 ، 1) ؛

هذه الخاصية تقسيم العنصر أفقيًا بمقدار -1 ، تقلبه بشكل فعال على طول المحور العمودي.

وبالمثل ، لقلب النص رأسياً (عكسه عبر المحور الأفقي) ، استخدم هذه الخاصية:

: Scale (1 ، -1) ؛
-O-transform: Scale (1 ، -1) ؛
-MS-Transform: Scale (1 ، -1) ؛

التحويل: المقياس (1 ، -1) ؛

عن طريق تطبيق هذه الخاصية ، يمكنك توسيع نطاق العنصر عموديًا بواسطة -1 ، تقلبه على طول المحور الأفقي.

]
ضع في اعتبارك رمز html التالي ، الذي يعرض بعض النصوص وحرف المقص:

"flip_v"> النص التجريبي ✂
-حاجز؛ الهامش: 1EM ؛ }
. flip_h {transform: scale (-1 ، 1) ؛ اللون: أحمر. }
. flip_v {transform: scale (1 ، -1) ؛ اللون: أخضر. }

سيعكس هذا أحرف المقص على طول محاور كل منهما ، مما يخلق مقصًا يسارًا مطلوبًا.

أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3