نظرة على CSS3 2D التحولات
ال وحدة التحول هي إضافة هائلة في CSS3 ، فهي تأخذ الطريقة التي نتعامل بها مع العناصر على موقع الويب إلى المستوى التالي.
هناك بعض التجارب التي تدهشني حقًا ، مثل هذه التجربة. ومع ذلك ، لن نبني شيئًا ما مثل أيقونة CSS فقط التي يمكن أن تتحول بطريقة أو بأخرى إلى Autobot ، حيث قد تكون ساحقة وغير قابلة للاستخدام تمامًا في الحياة الحقيقية أيضًا.
بدلاً من ذلك ، هذه المرة ، سوف نتراجع ونراجع أساسيات تحويلات CSS3 2D لنرى كيف تعمل على مستوى أساسي.
بناء الجملة
تسمح لنا وحدة تحويلات CSS3 بشكل أساسي بتحويل عنصر إلى حد ما مثل الترجمة والتحجيم والتدوير والتجويف.
بناء الجملة الرسمي هو تحويل: طريقة (القيمة). ومع ذلك ، مثل أي إضافات CSS3 رائعة أخرى لا تزال في المراحل المبكرة ، لا تزال المتصفحات الحالية بحاجة إلى إصدار بناء الجملة لتشغيل التحويلات. لذلك ، سيتحول بناء الجملة الكامل كما يلي:
تحويل: الطريقة (القيمة) ؛ / * W3C Official Syntax * / -o-convert: method (value)؛ / * Opera 10.5+ * / -ms-convert: method (value)؛ / * Internet Explorer 9.0+ * / -moz-convert: method (value)؛ / * Firefox 3.6+ * / -webkit-convert: method (value)؛ / * Chrome / Safari 3.2+ * /
أيضا ، الطريقة التي نشير إليها أعلاه هي وظائف تحويل, والتي يمكن استبدالها بأحد الإجراءات التالية: ترجمه(), مقياس(), استدارة() أو انحراف ().
القيمة
معظم قيمة الطريقة سوف تتوافق مع X-محور و Y-محور. إذا كنت تتذكر نظام الإحداثيات الديكارتية من فصل الرياضيات في المدرسة الثانوية ، فإن المبدأ الأساسي مشابه تمامًا ، حيث يمثل المحور السيني أفقي ويمثل المحور ص عمودي خط.
باستثناء التناوب. ال دوران سوف تستخدم الإحداثيات القطبية والتي يتم التعبير عنها بالدرجات التي تتراوح من 0 إلى 360.
يمكن أن تكون القيم الخاصة بكل الأساليب سلبية أو إيجابية. ما عليك سوى تدوين ملاحظة ، حيث تتم قراءة صفحة الويب بالتتابع من أعلى إلى أسفل مما يجعل المحور ص في الشبكة يعمل عكسًا عن المبدأ الأصلي للإحداثيات الديكارتية. هذا يعني أنه عند إضافة قيمة سالبة إلى Y-محور, سوف ينتقل إلى الأعلى بدلاً من ذلك.
باستخدام التحولات
الآن ، دعونا نرى العرض التوضيحي الأساسي التالي لرؤية التحول في العمل.
أنا أترجم
لا تكون غائما مع المصطلح ترجمه, لن تترجم لغة أجنبية. ال ترجمه هنا في الواقع وسيلة لتحريك العناصر في بعض الاتجاه.
يحتوي الأسلوب على قيمتين؛ X و Y. ال قيمة X كما أشرنا أعلاه سوف يأخذ العنصر أفقيا. إلى اليسار أو إلى اليمين, بينما ال Y سوف القيمة يأخذها عموديا ل أسفل أو إلى الأعلى.
الآن ، دعونا نرى بعض العروض التوضيحية البسيطة أدناه:
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: ترجمة (100 بكسل ، 250 بكسل) ؛
سينقل المقتطف أعلاه عنصر 100px إلى اليمين و 250 بكسل إلى الأسفل.
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ convert: translate (100px، 0)؛
سينقل المقتطف أعلاه العنصر مباشرةً إلى اليمين لـ 100 بكسل ، لأننا نسدد المحور ص. بعد ذلك ، إذا كنا نريد نقل العنصر إلى اليسار ، فنحن بحاجة فقط إلى تعيين المحور السيني في صورة سلبية ، كما يلي:
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ convert: translate (-100px، 0)؛
- "ترجمة" التجريبي
بدلاً من ذلك ، يمكننا نقل العنصر في اتجاه واحد باستخدام هذه الطرق الفردية ؛ translateX () و translateY (), الفرق هو أن كل طريقة من هذه الطرق تقبل قيمة واحدة فقط.
لذلك ، من الناحية العملية ، فإن تحويل: ترجمة (-100 بكسل ، 0) يساوي أيضا تحويل: translateX (-100 بكسل).
الثاني - مقياس
ال مقياس طريقة تسمح لنا ل تكبير أو تقليل العناصر من حجمها الفعلي. قيمة المقياس هي نفسها القيمة ترجمه الطريقة أعلاه ، كما أنه يحتوي على X و Y. والفرق الوحيد هو أننا لا نحدد الوحدة. هنا مثال:
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: مقياس (1.5) ؛
المثال أعلاه سوف تكبير شعبة 1.5 أو 150٪ من حجمها الفعلي, ونظرًا لأننا نجعلها تتساوى في كلا الاتجاهين X و Y ، فإننا نحتاج فقط إلى الإعلان عنها بقيمة واحدة. يمكنك أيضا إعلان ذلك بهذه الطريقة تحويل: مقياس (1.5 ، 1.5) ؛ إذا كنت تريد الذهاب إلى مزيد من التفاصيل ، فستفعل نفس الشيء.
علاوة على ذلك ، إذا كنا نريد تقليل العنصر ، فسنستخدم على وجه التحديد قيمة من 0.999 إلى صفر مطلق ، مثل المثال أدناه ، مما يقلل من حجم div لمدة 50٪ أو النصف:
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: مقياس (0.5) ؛
لكن كن حذرًا ، إذا قمت بتعيين القيمة لتكون مطلقة “0” ال شعبة سوف تختفي فقط ، لذلك ما لم يكن لديك سبب وجيه للقيام بذلك ، لن أوصي به.
- عرض "النطاق"
ثالثا - تدوير
كما ذكرنا سابقا في هذا المنصب ، و استدارة يستخدم الأسلوب الإحداثيات القطبية ، لذلك يتم ذكر القيمة بالدرجات. هنا مثالان
المقتطف أدناه سوف تدور شعبة 30 درجة في اتجاه عقارب الساعة.
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: تدوير (30deg) ؛
قيمة سالبة ، كما هو موضح في المثال أدناه ، ستقوم بتدوير شعبة في الاتجاه المعاكس (عكس اتجاه عقارب الساعة) في نفس الدرجة.
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: تدوير (-30deg) ؛
- "تدوير" التجريبي
الرابع - الانحراف
ال انحرف طريقة تمكننا من إنشاء نوع من متوازي الاضلاع. كما أنه يحتوي على قيمتين للمحور X و Y. ومع ذلك ، يتم ذكر القيمة نفسها في درجة ، بدلاً من القياسات الخطية مثل نستخدمها ل مقياس أو ال ترجمه طريقة. هنا مثال:
div عرض: 200 بكسل ؛ الارتفاع: 100 بكسل ؛ تحويل: الانحراف (30deg ، 10deg) ؛
- "الانحراف" التجريبي
الخامس - طريقة متعددة
ال تحول لا تقتصر الخاصية على معالجة طريقة واحدة فقط ، في الواقع يمكننا تضمين طرق متعددة في الإعلانات الفردية ، مثل هذا:
div عرض: 100 بكسل ؛ الارتفاع: 100 بكسل ؛ convert: translateX (100px) rotate (45deg)؛
سينقل المقتطف أعلاه العنصر 100 بكسل إلى اليمين وفي نفس الوقت يدور أيضًا بمقدار 45 درجة.
"طريقة متعددة" التجريبي.
تحويل الأصل
ال transfrom المنشأ - كما يوحي اسمها - يستخدم للسيطرة على نقطة البداية للتحول. إذا لم نعلن صراحة هذه الخاصية مع بناء الجملة التالي أصل التحويل: X Y ؛, ثم يأخذ المتصفح القيمة الافتراضية وهي 50٪ لـ X و 50٪ لـ Y.
الآن ، إذا حددنا تحويل المنشأ إلى 0 (X) 0 (Y) سيبدأ التحويل من أعلى اليسار.
مرة أخرى ، لا تزال جميع المتصفحات بحاجة إلى إصدار البادئة لاستدعاء هذه الخاصية. لذلك ، إليك النسخة الكاملة لضمان تشغيلها في معظم المتصفحات الحالية:
-webkit-convert-origin: X Y؛ - تحويل أصل المنشأ: X Y ؛ تحويل أصل: X Y ؛ - تحويل الأصل: X Y ؛ أصل التحويل: X Y ؛
- عرض "تحويل الأصل"
استنتاج
لقد مررنا بأساليب التحويل الأربعة الأساسية ؛ ترجمة ، مقياس ، تدوير وتحريف
ومع ذلك ، كما ذكرنا ، لا تزال هذه الوحدة في المرحلة المبكرة ، لذا إذا قمت بتطبيق هذه الطرق في موقع الويب الخاص بك التالي ، فتأكد من انخفاضها بأمان للمتصفحات غير المتوافقة (لا أشير إلى IE6 هنا).
أخيرًا ، يمكنك عرض كل العرض التوضيحي أو تنزيل المصدر من الروابط التالية.
- عرض
- تحميل المصدر
