diff options
Diffstat (limited to 'files/ar/web/css/التحول/index.html')
| -rw-r--r-- | files/ar/web/css/التحول/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/ar/web/css/التحول/index.html b/files/ar/web/css/التحول/index.html new file mode 100644 index 0000000000..93ef2bb84e --- /dev/null +++ b/files/ar/web/css/التحول/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="<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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |