diff options
Diffstat (limited to 'files/ar/web/css/transform/index.html')
| -rw-r--r-- | files/ar/web/css/transform/index.html | 137 |
1 files changed, 0 insertions, 137 deletions
diff --git a/files/ar/web/css/transform/index.html b/files/ar/web/css/transform/index.html deleted file mode 100644 index 7b25fd9c6a..0000000000 --- a/files/ar/web/css/transform/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -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="<transform-function>">{{cssxref("<transform-function>")}}</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> - -{{csssyntax}} - -<h2 id="أمثلة">أمثلة</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><div>عنصر التحويل</div></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("<transform-function>")}} 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("<transform-function>")}} نوع البيانات</li> - <li> إظافة التحول إلى<a href="https://louisremi.github.io/jquery.transform.js/"> jQuery</a></li> -</ul> |