7.9 KiB
| title | localeTitle |
|---|---|
| CSS3 2d Transforms | CSS3 2d يحول |
CSS3 2d يحول
تتيح لك تحويلات CSS3 ترجمة العناصر وتدويرها وتغيير حجمها وتشويشها.
التحويل هو تأثير يسمح لعنصر بتغيير الشكل والحجم و موضع.
يدعم CSS3 التحولات ثنائية وثلاثية الأبعاد.
دعم المستعرض للتحويل 2D
تحدد الأرقام في الجدول أول إصدار متصفح يدعم بشكل كامل الملكية.
الأرقام متبوعة بـ -ms- أو -webkit- أو -moz- أو -o- تحديد الإصدار الأول ذلك عملت مع البادئة.
| الملكية كروم | IE | فايرفوكس سفاري الأوبرا | | --------------------------------------- | ---------------------- | ------------------ | ------------------- | -------------------- | -------------------------------------------- | | تحويل | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- | | تحويل المنشأ (بناء جملة اثنين) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 9.0 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
CSS3 2D يحول
أساليب:
translate()rotate()scale()skewX()skewY()matrix()
طريقة الترجمة ()
تقوم طريقة translate() بنقل عنصر من موقعه الحالي (وفقًا لـ إلى المعلمات المعطاة للمحور X والمحور Y).
يقوم المثال التالي بنقل عنصر <div> 50 بكسل إلى اليمين ، و 100 بكسل أسفل من وضعها الحالي:
مثال:
div { -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */ transform: translate(50px, 100px); }
طريقة التدوير ()
تقوم طريقة rotate() بتدوير عنصر في اتجاه عقارب الساعة أو عكس عقارب الساعة وفقا لدرجة معينة.
يقوم المثال التالي بتدوير عنصر <div> باتجاه عقارب الساعة بـ 20 درجة:
مثال:
div { -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); }
يؤدي استخدام القيم السالبة إلى تدوير العنصر عكس اتجاه عقارب الساعة.
يقوم المثال التالي بتدوير عنصر <div> عكس اتجاه عقارب الساعة بـ 20 درجات:
مثال:
div { -ms-transform: rotate(-20deg); /* IE 9 */ -webkit-transform: rotate(-20deg); /* Safari */ transform: rotate(-20deg); }
مقياس () الطريقة
أسلوب scale() يزيد أو يقلل من حجم عنصر (وفقا ل المعلمات المقدمة للعرض والارتفاع).
المثال التالي يزيد عنصر <div> ليكون مرتين من به العرض الأصلي ، وثلاث مرات من ارتفاعه الأصلي:
مثال:
div { -ms-transform: scale(2, 3); /* IE 9 */ -webkit-transform: scale(2, 3); /* Safari */ transform: scale(2, 3); }
المثال التالي يقلل عنصر <div> ليكون نصف أصله الأصلي العرض والارتفاع:
مثال:
div { -ms-transform: scale(0.5, 0.5); /* IE 9 */ -webkit-transform: scale(0.5, 0.5); /* Safari */ transform: scale(0.5, 0.5); }
طريقة skewX ()
skewX() طريقة skewX() عنصرًا على طول المحور السيني بزاوية معينة.
المثال التالي يزيح عنصر <div> 20 درجة على طول المحور X:
مثال:
div { -ms-transform: skewX(20deg); /* IE 9 */ -webkit-transform: skewX(20deg); /* Safari */ transform: skewX(20deg); }
طريقة (())
skewY() طريقة skewY() عنصرًا على طول المحور ص من الزاوية المحددة.
المثال التالي يزيح عنصر <div> 20 درجة على طول المحور الصادي:
مثال:
div { -ms-transform: skewY(20deg); /* IE 9 */ -webkit-transform: skewY(20deg); /* Safari */ transform: skewY(20deg); }
طريقة الانحراف ()
skew() طريقة skew() عنصرًا على المحور X و Y بواسطة الزوايا المحددة.
المثال التالي يزيح عنصر <div> 20 درجة على طول المحور X ، و 10 درجات على طول المحور الصادي:
مثال:
div { -ms-transform: skew(20deg, 10deg); /* IE 9 */ -webkit-transform: skew(20deg, 10deg); /* Safari */ transform: skew(20deg, 10deg); }
إذا لم يتم تحديد المعلمة الثانية ، فإنها تحتوي على قيمة صفرية. لذلك ، ما يلي على سبيل المثال يتخطى عنصر <div> 20 درجة على طول المحور X:
مثال:
div { -ms-transform: skew(20deg); /* IE 9 */ -webkit-transform: skew(20deg); /* Safari */ transform: skew(20deg); }
طريقة المصفوفة ()
تجمع طريقة matrix() جميع طرق التحويل ثنائية الأبعاد في واحدة.
تأخذ طريقة المصفوفة (6) المعلمات ، التي تحتوي على وظائف الرياضيات ، والتي يسمح لك بتدوير ، قياس ، نقل (ترجمة) ، وتحريف العناصر.
المعلمات هي على النحو التالي: مصفوفة (scaleX ()، skewY ()، skewX ()، scaleY ()، translateX ()، translateY ())
مثال:
div { -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); }
CSS3 خصائص التحويل
يسرد الجدول التالي جميع خصائص التحويل ثنائية الأبعاد:
| الملكية الوصف | | ---------------- | -------------------------------------------------- ------- | | تحويل | يطبق تحويل ثنائي أو ثلاثي الأبعاد على عنصر | | تحويل أصل | يسمح لك بتغيير الموقف على العناصر المحولة |
طرق التحويل ثنائية الأبعاد
| وظيفة الوصف | | --------------------- | -------------------------------------------------- ----------------------- | | مصفوفة (n، n، n، n، n، n) | يحدد تحويل ثنائي الأبعاد ، باستخدام مصفوفة من ست قيم | | ترجمة (س ، ص) | تعريف ترجمة ثنائية الأبعاد ، وتحريك العنصر على طول المحور X- و Y- | translateX (n) | يحدد ترجمة ثنائية الأبعاد ، وينقل العنصر على طول المحور السيني | ترجماتي (n) | تعريف ترجمة ثنائية الأبعاد ، تحريك العنصر على طول المحور ص | | مقياس (س ، ص) | يعرّف تحويل مقياس ثنائي الأبعاد ، يغيّر عرض العناصر وارتفاعها | | scaleX (n) | يعرّف تحويل نطاق ثنائي الأبعاد ، يغيّر عرض العنصر | | scale (n) | يعرِّف تحويل نطاق ثنائي الأبعاد ، ويؤدي إلى تغيير ارتفاع العنصر | تدوير (زاوية) | يحدد دوران 2D ، يتم تحديد الزاوية في المعلمة | | انحراف (x-angle، y-angle) | يعرّف تحول انحراف ثنائي الأبعاد على المحور X- و Y- | skewX (زاوية) | يحدد تحول انحراف ثنائي الأبعاد على المحور X | | skewY (زاوية) | يعرّف تحول انحراف ثنائي الأبعاد على المحور "ص"