المرة الأولى أ rotateY كنت متأكدًا من أنني سأقوم بإمالة البطاقة إلى الشاشة ثم أسحقها بشكل مسطح بدلاً من ذلك، وفقدت الجزء الأفضل من فترة ما بعد الظهر قبل أن أفهم السبب. لم يكن هناك منظور. لقد كتبت التدوير ولكن ليس الوظيفة الوحيدة التي تجعل التدوير يُقرأ على أنه عمق، وقد فعلت CSS بالضبط ما قلته لها بدلاً من ما قصدته. بعد ظهر ذلك اليوم هو السبب الرئيسي الذي يجعلني أقوم الآن ببناء التحويلات عن طريق سحب أشرطة التمرير ومشاهدة الصندوق وهو يستجيب، بدلاً من كتابة قيمة وحفظها وتحديثها والتحديق فيها.
Css transform تعد الخاصية واحدة من أكثر الأشياء المفيدة في اللغة ومن الأسهل أن تخطئ بمهارة. إنه يتحرك ويدور ويقيس ويحرف عنصرًا دون إزعاج أي شيء حوله، ولهذا السبب يعتمد عليه كل تأثير تحوم، وكل رفع بطاقة، وكل رسوم متحركة للدخول. ولكنه يجمع الكثير من السلوك في سلسلة قصيرة، ويغير ترتيب الوظائف النتيجة، وتكون للوظائف ثلاثية الأبعاد تبعية غير مرئية حتى تصل إليها. القيمة التي يمكنك رؤيتها أثناء البناء تستحق أكثر بكثير من القيمة التي عليك تخيلها.
ال مولد تحويل CSS يمنحك شريط تمرير لكل وظيفة، الترجمة والتدوير والقياس والانحراف والثلاثي ثلاثي الأبعاد لـ RotateX وRotateY والمنظور، ويطبق كل تغيير على عنصر المعاينة المباشرة أثناء قيامه بذلك. كما يتيح لك أيضًا تعيين أصل التحويل، ونقطة التثبيت التي تدور حولها الدورات والقياس. يوجد الإعلان الدقيق في مربع جاهز للنسخ أدناه، ويحتوي فقط على الوظائف التي لمستها.
ليرة تركية؛DR: Css
transformتقوم الخاصية بإعادة وضع العنصر وإعادة تشكيله دون التأثير على تخطيط الصفحة، وهو ما يجعله الأداة الصحيحة لتأثيرات التمرير والرسوم المتحركة. تنطبق الوظائف من اليمين إلى اليسار، لذا فإن الترتيب مهم؛ تحتاج الدورات ثلاثية الأبعاد إلى أperspective()لتبدو ثلاثية الأبعاد؛ وأي عنصر تم تحويله يصبح كتلة تحتوي على أطفاله الثابتين والمطلقين. يعرض هذا المولد كل وظيفة بمعاينة مباشرة، ويصدر فقط الوظائف التي تغيرها، وينتج CSS نظيفًا يمكنك لصقه مباشرة في ورقة الأنماط. يتم تشغيله بالكامل في متصفحك بدون تسجيل.
ما هي المشكلة التي يحلها مولد تحويل CSS؟
ال transform الخاصية مجردة بنفس الطريقة التي تكون بها شبكة CSS مجردة. أنت لا تحرك وحدات البكسل مباشرة؛ أنت تصف عملية هندسية وتسمح للمتصفح بحساب النتيجة. translateX(40px) rotate(15deg) scale(1.1) هي تعليمات دقيقة، ولكن لا توجد طريقة للشعور بنتيجة ربط هؤلاء الثلاثة من النص وحده. عليك أن تعرضه. وتقديمه في مشروعك الخاص يعني حلقة الكتابة والحفظ والتحديث، وهي حلقة بطيئة بدرجة كافية بحيث يتوقف معظم الأشخاص عن التجربة قبل وقت طويل من العثور على القيمة التي يريدونها.
ينهار المولد تلك الحلقة إلى لا شيء. تقوم بسحب شريط التمرير الدوار ويدور الصندوق في الوقت الفعلي. ترفع الميزان وينمو من مركزه. تضيف ترجمة وتنزلق مع الحفاظ على دورها. عشر دقائق من هذا والعلاقة بين الأرقام والحركة تتوقف عن كونها شيئًا تترجمه في رأسك وتصبح شيئًا تشعر به. عند الانتهاء، لا يوجد شيء للنسخ، لأن CSS العامل قد كتب لك طوال الوقت.
هناك فائدة ثانية تهم أكثر مما تبدو. إن بناء التحويل عن طريق المعالجة يعني أن الأداة لا يمكنها إصدار سوى CSS صالح وجيد التكوين. لا يمكنك إنتاج مكسور transform القيمة عن طريق سحب شريط التمرير، بحيث يكون الإخراج دائمًا آمنًا للصقه. هذه الموثوقية هي السبب وراء إبقائي على رف من منشئي CSS المرئيين قريبين، وهو نفس السبب الذي يجعلني أصل إلى مولد الظل الصندوقي بدلاً من حساب إزاحات الظل يدويًا.
لماذا يهم ترتيب وظائف التحويل؟
هذه هي التفاصيل الوحيدة التي تعرقل الناس أكثر من غيرها، وهي تستحق الفهم بدلاً من العمل حولها. عندما تقوم بإدراج عدة وظائف في واحدة transform، يطبقها المتصفح من اليمين إلى اليسار، كل واحدة منها تعمل في مساحة الإحداثيات التي تركها السابق. وهذا يعني أن الترتيب يتغير حقًا حيث ينتهي العنصر.
يأخذ translateX(100px) rotate(45deg) مقابل rotate(45deg) translateX(100px). في الأول، تتم ترجمة العنصر مائة بكسل ثم يتم تدويره في مكانه، بحيث يجلس مائة بكسل إلى اليمين ويدور بمقدار خمس وأربعين درجة. في الثانية، يحدث التدوير أولاً، مما يؤدي إلى تدوير محاور إحداثيات العنصر '؛، ثم تقوم الترجمة بتحريكه بمقدار مائة بكسل على طول استدارة المحور X، يرسله قطريًا إلى الأسفل وإلى اليمين. نفس الوظيفتين، نفس القيمتين، مواضع مختلفة تمامًا.
يصدر المولد وظائفه بترتيب متعمد، منظور أولاً، ثم يترجم، ثم يدور، ثم يقيس، ثم ينحرف، وهو افتراض معقول يحافظ على تصرف الحالات الشائعة بشكل حدسي. ولكن بمجرد أن تفهم أن هذا الترتيب له معنى، فإنك تفهم أيضًا لماذا يؤدي نسخ التحويل من مكان إلى آخر أحيانًا إلى نتيجة لم تتوقعها: لقد قمت بتحريك السلسلة ولكن ليس النموذج العقلي الذي يقف خلفها. إن بناءها بنفسك، ورؤية كل وظيفة ومساهمة #39؛، هو كيفية بناء هذا النموذج.
كيف أجعل التحويل ثلاثي الأبعاد يبدو ثلاثي الأبعاد؟
هذا هو الفخ الذي كلفني بعد ظهر ذلك اليوم. الوظائف rotateX و rotateY أدر عنصرًا حول المحورين الأفقي والرأسي، والذي يجب أن يوجهه نحوك أو بعيدًا عنك مثل قلب الصفحة. ولكن بشكل افتراضي لا يوجد عمق في المشهد، لذلك يتم عرض الدوران مباشرة على المستوى المسطح للشاشة ويبدو العنصر ببساطة وكأنه يضغط. أ rotateY(60deg) مع عدم وجود منظور يبدو أن العنصر أصبح أضيق، وليس كما تحول.
العنصر المفقود هو perspective، وهناك طريقتان لتوريدها. يمكنك وضع أ perspective خاصية العنصر الأصلي، والتي تنشئ نقطة اختفاء مشتركة لجميع أبنائه ثلاثي الأبعاد، أو يمكنك إضافة perspective() وظيفة في بداية العنصر '؛s الخاصة transform، مما يعطي هذا العنصر عمقًا خاصًا به. يستخدم هذا المولد النهج الثاني: ضبط شريط تمرير المنظور وينبعث perspective() أولاً في السلسلة، بالضبط حيث يجب أن تكون. القيم الأصغر، في مكان ما بين ثلاثمائة وستمائة بكسل، تضع نقطة التلاشي بالقرب من العنصر وتجعل العمق مثيرًا؛ القيم الأكبر تعمل على تسطيح التأثير نحو ميل لطيف.
تعد البطاقة ثلاثية الأبعاد المعدة مسبقًا في الأداة هي أسرع طريقة لرؤية ذلك. فهو يحدد منظور ستمائة بكسل و rotateY من خمس وعشرين درجة، وينقلب مربع المعاينة بشكل مقنع على الشاشة. أعد شريط تمرير المنظور إلى الصفر وشاهد نفس الدوران ينهار في وضع الاسكواش المسطح. هذا قبل وبعد هو الدرس بأكمله في سحبين.
ماذا يفعل الأصل التحويلي؟
كل دوران وكل مقياس يحتاج إلى نقطة ثابتة للدوران حولها، وهذه النقطة هي أصل التحويل. افتراضيًا، يقع في المركز الميت للعنصر، ولهذا السبب لم يتم تعديله rotate يدور صندوقًا حول وسطه وغير معدل scale ينمو إلى الخارج في كل اتجاه في وقت واحد. حرك الأصل وسيتغير كلا السلوكين.
تعيين الأصل ل top left ويصبح الدوران تأرجحًا، حيث يدور العنصر من الزاوية العلوية اليسرى مثل علامة مفصلية. اضبطه على bottom و أ scaleY قم بتنمية العنصر لأعلى من قاعدته بدلاً من توسيعه بشكل متماثل، وهو بالضبط ما تريده للشريط الذي يجب أن يرتفع من محور المخطط. يوفر المولد جميع مواضع الكلمات الرئيسية التسعة والمركز والحواف الأربعة والزوايا الأربع، ويقوم بتحديث المعاينة في اللحظة التي تختار فيها واحدًا، وبالتالي فإن الفرق بين الدوران والتأرجح هو نقرة واحدة.
هذه إحدى تلك الخصائص التي تكون غير مرئية تقريبًا حتى تحتاج إليها، وهي الشيء الوحيد الذي ينتج التأثير الذي تسعى إليه. قائمة يجب أن تتكشف من حافتها العلوية، وتلميح أداة يجب أن يتوسع من العنصر الذي ينتمي إليه، وبطاقة يجب أن تدور حول الزاوية بدلاً من منتصفها، وكلها ذات أصل تحويلي، ولا شيء منها واضح من transform القيمة وحدها.
لماذا لا يدفع التحويل العناصر الأخرى؟
واحدة من أكثر الخصائص المفيدة ل transform هو أيضًا أكثر ما يجده الناس مفاجئًا في المرة الأولى التي يعضهم فيها. لا يؤثر العنصر المحول على التخطيط المحيط به. عندما تترجم مربعًا أربعين بكسل إلى اليمين، فإنه يعرض أربعين بكسل إلى اليمين، لكنه لا يزال يحتفظ بمساحته الأصلية في تدفق المستند، لذلك لا يتحرك أي شيء آخر لملء الفجوة ولا يتم دفع أي شيء جانبًا. التحويل هو تأثير وقت الطلاء، ويتم تطبيقه بعد حساب التخطيط بالفعل.
هذه ميزة وليست خطأ، وهي بالضبط ما يجعل تحويل الأداة الصحيحة للرسوم المتحركة. لأن تحريك عنصر مع transform لا يؤدي إلى إعادة التدفق، يمكن للمتصفح تركيب التغيير على وحدة معالجة الرسومات والحفاظ على الرسوم المتحركة عند ستين إطارًا في الثانية. تحريك نفس العنصر مع top أو left أو margin يجبر المتصفح على إعادة حساب التخطيط في كل إطار، وهو السبب الأكثر شيوعًا للرسوم المتحركة التي تتلعثم وتسقط الإطارات. إذا كنت تريد حركة سلسة، فأنت تقوم بالتحريك transform و opacity، وتترك خصائص التخطيط وحدها. عندما تحتاج إلى إعادة تدفق المحتوى المحيط، فهذه علامة تريد تغيير التخطيط بدلاً من التحويل، وأداة مثل مولد فليكس بوكس أو ال مولد شبكة CSS هو المكان المناسب للبدء.
لماذا انكسر طفل ثابت داخل العنصر المتحول الخاص بي؟
هذه هي المسكتك التي تبدو وكأنها خطأ في شيء غير ذي صلة، ومن الجدير أن تعرف قبل أن تكلفك ساعة. المواصفات تقول أن أي عنصر مع transform قيمة أخرى غير none تصبح كتلة تحتوي على أحفادها الذين تم وضعهم fixed أو absolute، كما أنه يخلق سياق تكديس جديد. كلاهما لهما عواقب تظهر بعيدًا عن التحويل نفسه.
التغيير الذي يحتوي على الكتلة هو الذي يفاجئ الناس. أ position: fixed من المفترض أن يتم تثبيت العنصر في إطار العرض، مع البقاء في مكانه أثناء تمرير الصفحة. ولكن إذا كان لدى أي سلف لهذا العنصر الثابت تحويل، فإن العنصر الثابت يتم تثبيته ذلك الجد بدلاً من ذلك، وفجأة "؛ ثابت واقتباس؛ يتم تمرير الرأس بعيدًا مع المحتوى أو أن النموذج الخاص بك محاصر داخل البطاقة. لا شيء في مظهر التحويل '؛ يشير إلى هذا؛ يبدو العنصر جيدًا، والشيء الذي يقع على ثلاثة مستويات لأسفل يضع نفسه بشكل خاطئ. عندما يتصرف عنصر ثابت أو مطلق كما لو كان محاصرًا، فإن أول شيء يجب التحقق منه هو ما إذا كان السلف يحمل تحويلًا. يؤدي تغيير سياق التراص إلى فئة موازية من الارتباك، حيث أ z-index الذي كان يعمل فجأة لا يعمل، لأن العنصر المحول أغلق أطفاله في طبقة التراص الخاصة بهم. نفس السلوك بالضبط ينطبق على filter الملكية، ولهذا السبب مولد مرشح CSS يحمل نفس التحذير.
ما هي الوظائف التي يغطيها المولد، ومتى تصل لكل منها؟
تعرض الأداة المجموعة الكاملة من وظائف التحويل الشائعة، وتساعد على معرفة الغرض من كل منها بدلاً من سحبها عشوائيًا. هنا الخريطة.
| وظيفة | ماذا يفعل | الاستخدام النموذجي |
|---|---|---|
translateX / translateY |
يحرك العنصر على طول المحور | مداخل منزلقة، ودفعات تحوم، وتحديد موضع الإزاحة |
rotate |
يقلب العنصر حول مركزه (2D) | شارات مائلة، لوادر دوارة، زوايا تحوم مرحة |
scale (X وY) |
ينمو أو يقلص العنصر | قم بالتمرير للتكبير/التصغير، وتأثيرات البوب، وردود الفعل بالضغط لأسفل |
skewX / skewY |
يميل العنصر على طول المحور | لافتات ديناميكية، وأشكال مائلة، وإشارات الحركة |
rotateX / rotateY |
يحول العنصر إلى مساحة ثلاثية الأبعاد | تقلب البطاقة، وإمالة الألواح، وتأثيرات تدفق الغطاء |
perspective |
يضيف عمقًا بحيث تتم قراءة الدورات ثلاثية الأبعاد بشكل صحيح | يقترن دائمًا بـ RotateX أو RotateY |
الاثنان اللذان يحتاجان إلى شريك هما الدورات ثلاثية الأبعاد، التي لا تفعل شيئًا مقنعًا بدون منظور، والمقياس السلبي، الذي يستحق الاستهجان لأنه ليس واضحًا. تعيين scaleX إلى قيمة سالبة، يقلب العنصر أفقيًا، مثل المرآة، وهذه هي الطريقة التي يعمل بها الإعداد المسبق لـ Flip Horizontal. إنها خدعة مفيدة حقًا، حيث تعكس رمزًا بدلاً من تصدير أصل ثانٍ، وتخرج مباشرة من التحكم في المقياس بمجرد معرفة أن القيم السالبة مسموح بها.
كيف يحافظ المولد على صدقة المعاينة؟
وضع الفشل لأي منشئ مرئي هو الانجراف بين ما تظهره المعاينة وما ينتجه الكود المصدر. الأداة التي تعرض معاينتها بطريقة ما وتكتب CSS الخاص بها بطريقة أخرى هي أسوأ من عدم وجود أداة على الإطلاق، لأنها تعلمك قيمة لن يتم إعادة إنتاجها. يتجنب هذا المولد ذلك من خلال إنشاء نمط المعاينة '؛s المضمن والإعلان المنسوخ من نفس الوظيفة، لذا فإن ما تراه هو حرفيًا ما تلصقه. لا يوجد مسار رمز ثانٍ قد يختلف.
ولهذا السبب أيضًا يحتوي الإخراج على الوظائف التي قمت بتغييرها فقط. مغادرة scale في هويتها واحدة، أو rotate عند الصفر، يعني أن هذه الوظائف غائبة ببساطة عن السلسلة بدلاً من كتابتها على أنها زائدة عن الحاجة scale(1) ضجيج. التحويل النظيف هو الذي يمكنك قراءته بنظرة سريعة وثقة، وإصدار وظائف ذات معنى فقط هو نفس التخصص الذي أعتمد عليه عبر أدوات CSS المرئية، من مولد التدرج إلى منشئ الظل الصندوقي. إذا كنت تقوم بتجميع مجموعة أوسع، فإن مجموعة أدوات مطور الويب يجمع الأشياء التي أفتحها في أغلب الأحيان، والعادات الكامنة وراء استخدامها بشكل جيد موجودة في أدوات إنتاجية المطور مرشد.
ما هي المتصفحات التي تدعم تحويلات CSS؟
يتم دعم تحويلات CSS في كل متصفح حالي وقد تم ذلك منذ أكثر من عقد من الزمن. الوظائف ثنائية الأبعاد، الترجمة والتدوير والقياس والانحراف، عالمية وغير مسبوقة، والوظائف ثلاثية الأبعاد جنبًا إلى جنب مع perspective مدعومة بشكل جيد بنفس القدر في Chrome وFirefox وSafari وEdge. القديم -webkit- و -moz- البادئات التي كانت ضرورية في السابق هي الوزن الساكن في ورقة الأنماط اليوم، ومخرج هذا المولد هو CSS قياسي وغير مسبوق يمكنك شحنه كما هو مكتوب. بالنسبة للقواعد الموثوقة، فإن مواصفات وحدة تحويلات CSS من المستوى 1 والمستوى 2 من W3C هي المصادر الأساسية، وتستحق القراءة بمجرد أن يمنحك المولد الحدس لمتابعتها.
إذا كنت تقوم ببناء مجموعة أدوات مرئية أوسع إلى جانب هذا، فإن مولد نصف القطر الحدودي ومنشئ الانتقال هم مرافقون طبيعيون، نظرًا لأن التحويل عند التمرير يريد دائمًا الانتقال لتسهيله. كل شيء هنا يعمل من جانب العميل، وCSS الذي تنسخه هو ملكك لاستخدامه بدون وقت تشغيل أو خطوة بناء أو تبعية.
الأسئلة المتداولة
ما هو مولد تحويل CSS؟
مولد تحويل CSS هو أداة مرئية تقوم بإنشاء قيمة تحويل CSS من الإعدادات التي تختارها. يمكنك ضبط الترجمة والتدوير والقياس والانحراف والمنظور ثلاثي الأبعاد باستخدام أشرطة التمرير، ويقوم بإخراج إعلان التحويل مع معاينة مباشرة للنتيجة.
هل ترتيب وظائف التحويل مهم؟
نعم. يتم تطبيق الوظائف من اليمين إلى اليسار في نظام إحداثيات العناصر، لذا فإن الترجمة ثم التدوير ليست مثل التدوير ثم الترجمة. تؤدي الترجمة أولاً إلى تحريك العنصر ثم تدويره في مكانه؛ يؤدي التدوير أولاً إلى تدوير المحاور، لذا فإن الترجمة اللاحقة ترسلها بزاوية.
كيف أجعل تحويل CSS يبدو ثلاثي الأبعاد؟
يحتاج التدوير ثلاثي الأبعاد إلى منظور لقراءته كعمق. أضف وظيفة منظور () في بداية التحويل، والتي ينبعثها هذا المولد عند ضبط شريط تمرير المنظور، أو وضع خاصية المنظور على العنصر الأصلي. القيم حوالي 300 إلى 600 بكسل تجعل العمق أكثر دراماتيكية.
ماذا يفعل الأصل التحويلي؟
يحدد أصل التحويل النقطة التي يدور حولها التحويل ويتدرج حولها. الافتراضي هو مركز العنصر. حركه إلى الزاوية ويصبح الدوران تأرجحًا من تلك الزاوية؛ حركه إلى الحافة وينمو القياس من تلك الحافة بدلاً من الخارج في كل اتجاه.
لماذا لا يؤدي التحويل إلى نقل العناصر الأخرى في الصفحة؟
التحويل هو تأثير وقت الطلاء. يظهر العنصر في موضعه الجديد ولكنه لا يزال يحتفظ بمربعه الأصلي في التخطيط، لذلك لا يتغير شيء حوله. هذا ما يجعل التحويل مثاليًا للرسوم المتحركة، ولماذا تستخدم الهامش أو الموضع أو خاصية التخطيط عندما تحتاج إلى محتوى لإعادة التدفق.
لماذا ينكسر الطفل الثابت أو المطلق داخل عنصر متحول؟
أي عنصر يحتوي على تحويل غير لا شيء يصبح كتلة تحتوي على أحفاده الثابتين والموضعين بشكل مطلق ويخلق سياق تكديس جديد. الموضع: يتم تثبيت الطفل الثابت بعد ذلك على الأصل المحول بدلاً من إطار العرض، ويمكن أن يتغير ترتيب فهرس z. انقل الطفل خارج العنصر المحول إذا كان يجب أن يظل ثابتًا على الشاشة.
هل يجب أن أقوم بتحريك التحويل بدلاً من الأعلى أو اليسار أو العرض أو الارتفاع؟
نعم للحركة السلسة. يتم تركيب التحويل والعتامة على وحدة معالجة الرسومات ولا يؤديان إلى تشغيل التخطيط، لذا يتم تحريكهما بمعدل 60 إطارًا في الثانية. يؤدي تحريك الجزء العلوي أو الأيسر أو العرض أو الارتفاع إلى إجبار المتصفح على إعادة حساب التخطيط على كل إطار، وهو السبب المعتاد للرسوم المتحركة المتعرجة.
هل التحويل الذي تم إنشاؤه CSS مجاني وآمن للاستخدام؟
نعم. الأداة مجانية تمامًا بدون حدود للتسجيل أو الاستخدام، وتصدر CSS قياسيًا غير مسبوق مدعومًا في كل متصفح حديث. تتم جميع عمليات المعالجة في متصفحك، لذلك لا يتم تحميل أي شيء وتعمل الأداة دون اتصال بالإنترنت بمجرد تحميلها.
