شرح خاصية Transform Scale في CSS او Css3

المستعمر للمعلوميات •
0



Transform Scale هي خاصية تمكنك من تغيير حجم الأبعاد الأفقية والعمودية للعنصر بمعنى Width و Height حيث يمكنك تغيرها من خلال المضاعفة و عكسها .
الشرح
/*لنقل اننا سنطبق الخاصية على صورة*/
.example-image{
    transform: scale(width,height);
    /* اذا كانت للطول والعرض نفس القيمة يمكنك كتابتها على الشكل اسفله*/
    transform: scale(1); /* في هذه الحالة سيتم المحافظة على ابعاد الصورة ولن تتغير */
    transform: scale(1,1); /* نفس الأمر في هذه الحالة لن تتغير ابعاد الصورة */
    transform: scale(1); /* تساوي */ transform: scale(1,1);
    transform: scale(2); /* سيتم مضاعفة ابعاد الصورة الطول والعرض الى ضعفين */
    transform: scale(0.5); /* سيتم تغيير قيمة الطول والعرض الى نصف قيمتهم الأصلية */
    transform: scale(0.5); /* يساوي */ transform: scale(.5);/* يساوي */transform: scale(.5,.5)
}

أمثلة تطبيقية ل Transform Scale

في هذه الأمثلة سوف نستعمل خاصية Hover لكي يظهر الفرق جيدا لذلك ان كنت لا تعلم ماهي خاصية Hover فقط ابحث عن عناصر div سأكون قد وضعت خلفيتها باللون الأخضر وقم بوضع اشارة الموس فوقها لأن خاصية hover لا تقوم بجعل الكود CSS التابع لها بالعمل الا بعد ان تكون اشارة الموس فوق العنصر المعين.

<div id="tran1" class="noor" >transform: scale(1); or transform: scale(1,1) يحافظ على الأبعاد الأصلية وبالتالي لن تلاحظ اي تغيير</div>
<div id="tran2" class="noor" >transform: scale(2,2); or transform: scale(2,2); يضاعف  </div>
<div id="tran3" class="noor" >transform: scale(.5,.5) or transform: scale(.5) يقوم بتغيير الأبعاد الطول العرض الى نصف الأبعاد الأصلية</div>
<div id="tran4" class="noor" >transform: scale(1,1.5);  width لن يتغير height هو من سيتغير</div>
<div id="tran5" class="noor" >transform: scale(1.7,1); width هو من سيتغير height لن يتغير</div>
.noor{text-align: center;direction: ltr;display: block;width: 300px;height: 150px;background-color: #006000;color: #ffffff;font-weight: bold;margin: 5px;border:solid 1px #000;}
#tran1:hover{
    transform: scale(1); /* = transform: scale(1,1);*/
}
#tran2:hover{
    transform: scale(2,2); /* = transform: scale(2); */
}
#tran3:hover{
    transform: scale(.5); /* = transform: scale(0.5) = transform: scale(.5,.5)=transform: scale(0.5,0.5) */
}
#tran4:hover{
    transform: scale(1,1.5); /* تم تغيير البعد العمودي يعني الطول ولم يتم تغيير العرض */
}
#tran4:hover{
    transform: scale(0.8,1); /* تم تغيير البعد العرضي ولم يتم تغيير البعد الطولي او العمودي */
}
transform: scale(1); or transform: scale(1,1) يحافظ على الأبعاد الأصلية وبالتالي لن تلاحظ اي تغيير
transform: scale(2,2); or transform: scale(2,2); يضاعف
transform: scale(.5,.5) or transform: scale(.5) يقوم بتغيير الأبعاد الطول العرض الى نصف الأبعاد الأصلية
transform: scale(1,1.5);
width لن يتغير
height هو من سيتغير
transform: scale(1.7,1);
width هو من سيتغير
height لن يتغير

أتمنى ان يكون شرح خاصية Transform Scale واضح وسلام عليكم.
Tags:

إرسال تعليق

أحدث أقدم