From 41c76addc97200aa71105773397aa4edd2af6b4c Mon Sep 17 00:00:00 2001
From: Florian Merz <me@fiji-flo.de>
Date: Thu, 11 Feb 2021 14:44:35 +0100
Subject: unslug ar: move

---
 files/ar/web/css/transform/index.html | 136 ++++++++++++++++++++++++++++++++++
 1 file changed, 136 insertions(+)
 create mode 100644 files/ar/web/css/transform/index.html

(limited to 'files/ar/web/css/transform/index.html')

diff --git a/files/ar/web/css/transform/index.html b/files/ar/web/css/transform/index.html
new file mode 100644
index 0000000000..93ef2bb84e
--- /dev/null
+++ b/files/ar/web/css/transform/index.html
@@ -0,0 +1,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>
-- 
cgit v1.2.3-54-g00ecf