شرح خاصية Transform Translate في برمجة Css3

المستعمر للمعلوميات •
0
Transform Translate هي خاصية في Css3 تمكنك من ازاحة عنصر HTML معين في الثلاث ابعاد X و Y و Z  حسب قيمة معينة والتي يمكن ان تكون ب px او rem او ch ويمكن استعمال هذه الخاصية على عدة اوجه منها :
  • TranslateX وتمكننا من ازاحة العنصر وفقا للمحور X الأفقي او ابعبارة اوضح العرضي.
  • TranslateY وتمكنك من ازاحة العنصر وفقا للمحور Y العمودي او الطولي .
  • TranslateZ تمكنك من ازاحة العنصر وفقا للمحور Z بمعنى بعيد او قريب حسب المشاهد وهذه الخاصية لا بد من استعمال معها خاصية Perspective بتحديد المساحة او الحدود التي سوف يتحرك فيها العنصر وفقا للمحور Z .
  • Translate3d وهذه الخاصية تجمع كل ما سبق وتمكنك من استعمالهم دفعة واحدة وكذلك لا ننسى Perspective بما ان Translate3d تشمل Translate Z ايضا.
سنبدأ بتطبيق هذه الخواص واحدة واحدة ولكل واحد أمثلتها التطبيقية

TranslateX or Translate

في هذا المثال سوف نطبق خاصية  TranslateX والتي تساهم في ازاحة العنصر وفقا للمحور الأفقي X كما اننا سوف نقوم باستخدام خاصية Hover لكي يظهر التغيير عند وضع الماوس على العنصر وكذلك سوف نستعمل خاصية Transition لكي يكون هناك تحريك بطيء يظهر من خلاله للمشاهد كيف يتم ازاحة العنصر .

<div id="TX" class="noor" ></div>
<div id="TX-reverse" class="noor" ></div>
.noor{position: relative;width: 300px;height: 150px;right: calc(50% - 150px);background-color: #005000;color: #fff;margin: 5px;transition:1s all;}
/* transform: translateX(100px) = transform: translate(100px) */
#TX:hover{
    transform: translateX(100px);
}
#TX-reverse:hover{
    transform: translateX(-100px);
}
transform: translateX(100px); ازاحة الى اليمين
transform: translateX(-100px); ازاحة الى اليسار

TranslateY


<div id="TY" class="noor" ></div>
<div id="TY-reverse" class="noor" ></div>
.noor{position: relative;width: 300px;height: 150px;right: calc(50% - 150px);color: #fff;margin: 5px;transition:1s all;}
/* ازاحة حسب المحور العمودي يعني بين الصعود والنزول عموديا*/
#TY{background-color: #005000;}
#TY:hover{
    background-color: #005000;
    transform: translateY(100px);
}
#TY-reverse{background-color: #500000;}
#TY-reverse:hover{
    background-color: #500000;
    transform: translateY(-100px);
}
transform: translateY(100px); ازاحة الى تحت
transform: translateY(-100px);ازاحة الى فوق

TranslateZ

خاصية TranslateZ تمكننا من تحريك عنصر معين وفقا للمحور Z بمعنى قريب او يعيد يعني لو كان العنصر قريب سيكون اكبر واذا كان بعيد سيكون اصغر وهكذا وهذه الخاصية لا تعمل الا مع وجود خاصية Perspective و التي تساهم في تحديد المساحة والحدود التي يتحرك فيها الجسم او العنصر وفقا للمحور Z .

<div id="TZ" class="noorz" >Example1</div>
<div id="TZ-reverse" class="noorz" >Example2</div>
.noorz{position: relative;width: 300px;height: 150px;left: calc(50% - 150px);color: #fff;margin: 5px;transition:1s all;}
/* perspective يفضل ان  تكون بحجم الشاشة */
#TZ{background-color: #005000;}
#TZ:hover{
    background-color: #005000;
    transform: perspective(100px) translateZ(10px);
}
#TZ-reverse{background-color: #500000;}
#TZ-reverse:hover{
    background-color: #500000;

    transform:perspective(100px) translateZ(30px);
}
perspective(100px) translateZ(10px)
perspective(100px) translateZ(30px)

Translate3d

هذه الخاصية تجمع كل الخواص السابقة فيها كل من TranslateX و TranslateY و TranslateZ .

<div id="T3d" class="noor3d" >translate3d(50px,50px,100px);</div>
.noor3d{background-color: #006000;color: #fff;font-weight: bold;position: relative;right: calc(50% - 150px);width: 300px;height: 150px;transition: 1s all;}
#T3d:hover{
    transform: perspective(500px) translate3d(50px,50px,100px);
}
translate3d(50px,50px,100px);
هنا يكون قد انتهى الشرح اتمنى ان يكون قد افادكم وسلام عليكم
Tags:

إرسال تعليق

أحدث أقدم