تسمح لك خاصية التحويل transform في CSS بإدارة وتغيير إحداثيات وأبعاد العناصر وما إلى ذلك كما سنتعرف في هذه الوثيقة.

ويتم ذلك عن طريق تعديل الإحداثيات لنموذج التنسيق المرئي للـ CSS.

 

إذا كانت الخاصية لها قيمة مختلفة عن none ، فسيتم إنشاء سياق تجميع. في هذه الحالة ، سيكون الكائن بمثابة كتلة تحتوي على position: fixed العناصر التي تحتوي عليها.

بناء الجملة

/* قيم رئيسية */
transform: none;

/* قيم وضيفية */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/*  قيم وضيفية متعددة */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* قيمة عامة */
transform: inherit;
transform: initial;
transform: unset;

التحويل يمكن أن يحدد بقيمة واحدة أو أكثر من وضيفة.

القيم

<transform-function>
يمكنك استعمال وظيفة واحد أو أكثر من وظائف تحويل CSS ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.
noneيحدد بعدم تحديد أي تحويل.

البنية

Syntax not found in DB!

أمثلة

HTML

<div>عنصر التحويل</div>

CSS

div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}

النتيجة

Please see Using CSS transforms and <transform-function> for more examples.

الميزات

الميزة الحالة التعليق
CSS Transforms Level 2
The definition of 'transform' in that specification.
Editor's Draft Adds 3D transform functions.
CSS Transforms Level 1
The definition of 'transform' in that specification.
Working Draft Initial definition.

Value not found in DB!

توافق المتصفح

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

36

Yes -webkit-

12 -webkit-

16

49 -webkit-

44 -webkit- 2

103

11 -webkit-

9 -ms- 4

12.1

15 -webkit-

10.5 — 15 -o-

9

3.1 -webkit-

3D support121210105154
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 -webkit- 1 Yes -webkit- Yes -webkit-

16

49 -webkit-

44 -webkit- 2

11.5 -webkit-

9

3.2 -webkit-

Yes
3D support3 -webkit- Yes Yes Yes223.2 Yes

1. Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

2. From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. Internet Explorer does not support the global values initial and unset.

4. Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

5. Internet Explorer 9.0 or earlier has no support for 3D transforms. Mixing 3D and 2D transform functions, such as -ms-transform:rotate(10deg) translateZ(0);, will prevent the entire property from being applied.

قد يفيدك

Document Tags and Contributors

المساهمون في هذه الصفحة: mohamadlounnas
آخر مَن حدّثها: mohamadlounnas,