تحويل CSS3 2D

CSS3 التحويل

CSS3 الانتقالية، فإننا يمكن نقل، تحجيم، بدوره، وتناوب عناصر التمدد.

كيف يعمل؟

تأثير التحويل، حتى أن أحد العناصر لتغيير شكل وحجم وموقع.

يمكنك تحويل 2D أو 3D العناصر.

دعم المتصفح

الأرقام الواردة في الجدول تمثل أول متصفح لدعم رقم الإصدار للممتلكات.

مباشرة بعد -webkit- الرقمية، -ms- أو -moz- قبل في دعم البادئة السمة الأولى رقم إصدار المتصفح.

إنترنت إكسبلورر 10، فايرفوكس، وأوبرا دعم تحويل الملكية.

يتطلب كروم وسفاري نسخة البادئة -webkit-.

ملاحظة: يتطلب إنترنت إكسبلورر 9 نسخة البادئة -ms-.

تحويل 2D

في هذا الفصل سوف تتعلم طريقة تحويل 2D:

• ترجمة ()
• تدوير ()
• على نطاق و()
• انحراف ()
• مصفوفة ()

في الفصل التالي سوف تتعلم تحويل 3D.

أمثلة

شعبة { تحويل: تدوير (30 درجة) ؛ - MS-تحويل: تدوير (30 درجة) ؛ / * IE 9 * / - بكت-تحويل: تدوير (30 درجة) ؛ / * سفاري وكروم * / }

محاولة »

ترجمة) طريقة (

ترجمة طريقة ()، وفقا إلى اليسار (المحور X) والجزء العلوي (العمودي) موقف معلمة معينة، ينتقل من الوضع الحالي للعنصر.

أمثلة

شعبة { تحويل: ترجمة (50 بكسل، 100 بكسل) ؛ - MS-تحويل: ترجمة (50 بكسل، 100 بكسل) ؛ / * IE 9 * / - بكت-تحويل: ترجمة (50 بكسل، 100 بكسل) ؛ / * سفاري وكروم * / }

محاولة »

ترجمة قيمة (50px، 100px) هو عنصر المحمول 50 بكسل من الجهة اليسرى، ونقل 100 بكسل من أعلى.

تدوير) طريقة (

تدوير طريقة ()، في عدد معين من درجة في دوران عقارب الساعة من العناصر. يسمح قيمة سالبة، وهذا هو دوران عكس اتجاه عقارب الساعة من العناصر.

أمثلة

شعبة { تحويل: تدوير (30 درجة) ؛ - MS-تحويل: تدوير (30 درجة) ؛ / * IE 9 * / - بكت-تحويل: تدوير (30 درجة) ؛ / * سفاري وكروم * / }

محاولة »

قيمة تناوب (30deg) عناصر استدارة 30 درجة في اتجاه عقارب الساعة.

على نطاق و) طريقة (

على نطاق و) طريقة (والتي تزيد أو تنقص حجم العنصر، اعتمادا على عرض (المحور X) وارتفاع (Y محور) المعلمات:

أمثلة

-ms-تحويل: حجم (2،3) ؛ / * IE 9 * / -webkit-تحويل: حجم (2،3)؛ / * سفاري * / تحويل: حجم (2،3)؛ / * معيار تركيب * /

محاولة »

على نطاق و(2،3) عرض الانتقال ضعف حجمها الأصلي، وثلاثة أضعاف حجم الارتفاع الأصلي.

الانحراف) طريقة (

الانحراف طريقة ()، وعنصر وفقا لعرضية (المحور X) والرأسية معلمات سطر (المحور Y) لزاوية معينة:

أمثلة

شعبة { تحويل: انحراف (30 درجة، 20 درجة) ؛ - MS-تحويل: انحراف (30 درجة، 20 درجة) ؛ / * IE 9 * / - بكت-تحويل: انحراف (30 درجة، 20 درجة) ؛ / * سفاري وكروم * / }

محاولة »

انحراف (30deg، 20deg) هو عنصر من عناصر المحور السيني والمحور Y حوالي 20 درجة حول 30 درجة.

المصفوفة) طريقة (

دمج مصفوفة () طريقة وطريقة لتحويل 2D إلى واحد.

طريقة المصفوفة على ستة معايير، بما في ذلك التناوب، والتحجيم، والانتقال (بالغسل) وظائف الميل.

أمثلة

استخدام مصفوفة () طريقة تناوب عنصر div 30 °

شعبة { تحويل: مصفوفة (0.866، 0.5، - 0.5، 0.866، 0، 0) ؛ - MS-تحويل: مصفوفة ( 0.866، 0.5، - 0.5، 0.866، 0، 0) ؛ / * IE 9 * / - بكت-تحويل: مصفوفة (0.866، 0.5، - 0.5، 0.866، 0، 0) ؛ / * سفاري وكروم * / }

محاولة »

خاصية تحويل جديدة

وفيما يلي قائمة بجميع خصائص التحويل:

2D طريقة التحويل