---
title: التحول (transform)
slug: Web/CSS/transform
tags:
  - التحول
  - التحول في صفحات الطرز المتراصة
  - خواص صفحات الطرز المتراصة
  - صفحات الطرز المتراصة
  - مرجع
translation_of: Web/CSS/transform
original_slug: Web/CSS/التحول
---
<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>