files/ar/web/css/التحول/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: التحول (transform)
slug: Web/CSS/التحول
tags:
  - التحول
  - التحول في صفحات الطرز المتراصة
  - خواص صفحات الطرز المتراصة
  - صفحات الطرز المتراصة
  - مرجع
translation_of: Web/CSS/transform
---
<div>{{CSSRef}}</div>

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

<p>ويتم ذلك عن طريق تعديل الإحداثيات <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model">لنموذج التنسيق المرئي للـ CSS.</a></p>

<p> </p>

<div>{{EmbedInteractiveExample("pages/css/transform.html")}}</div>

<p class="hidden">يتم تخزين المصدر لهذا المثال التفاعلي في مستودع GitHub. إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a>وإرسال طلب سحب.</p>

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

<h2 id="بناء_الجملة">بناء الجملة</h2>

<pre class="brush: css no-line-numbers">/* قيم رئيسية */
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;
</pre>

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

<h3 id="القيم">القيم</h3>

<dl>
 <dt id="&lt;transform-function>">{{cssxref("&lt;transform-function&gt;")}}</dt>
 <dd>يمكنك استعمال وظيفة واحد أو أكثر من <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function">وظائف تحويل CSS </a>ليتم تطبيقها. يتم تطبيق التحويلات المركبة بشكل فعال بالترتيب من اليسار إلى اليمين.</dd>
 <dt id="none"><code>none</code>يحدد بعدم تحديد أي تحويل.</dt>
</dl>

<h3 id="البنية">البنية</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="أمثلة">أمثلة</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;div&gt;عنصر التحويل&lt;/div&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}</pre>

<h3 id="النتيجة">النتيجة</h3>

<p>{{EmbedLiveSample("Examples", "400", "160")}}</p>

<p>Please see <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transforms">Using CSS transforms</a> and {{cssxref("&lt;transform-function&gt;")}} for more examples.</p>

<h2 id="الميزات">الميزات</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">الميزة</th>
   <th scope="col">الحالة</th>
   <th scope="col">التعليق</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Transforms 2', '#transform-functions', 'transform')}}</td>
   <td>{{Spec2('CSS Transforms 2')}}</td>
   <td>Adds 3D transform functions.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Transforms', '#transform-property', 'transform')}}</td>
   <td>{{Spec2('CSS3 Transforms')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="توافق_المتصفح">توافق المتصفح</h2>

<div class="hidden">يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. إذا كنت ترغب في المساهمة في البيانات ، فيرجى مراجعة <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a>وإرسال طلب سحب.</div>

<p>{{Compat("css.properties.transform")}}</p>

<h2 id="قد_يفيدك">قد يفيدك</h2>

<ul>
 <li><a href="/en-US/docs/CSS/Using_CSS_transforms">استعمال CSS transforms</a></li>
 <li>{{cssxref("&lt;transform-function&gt;")}} نوع البيانات</li>
 <li> إظافة التحول إلى<a href="https://louisremi.github.io/jquery.transform.js/"> jQuery</a></li>
</ul>