شرح خاصية Transform Rotate في برمجة Css او Css3

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

خاصية Transform Rotate تمكنك من تدوير اي عنصر Html بأي زاوية تريد كل ما سوف تقوم به هو تحديد درجة الزاوية التي تريد ان يكون العنصر عليها كيفما كانت عموديا مائلة او اي درجة تابع الشرح لتفهم.
Transform هي خاصية تطبق بعدة خصائص مهمة مثل Rotate العادية، RotateX ،RotateY ،RotateZ و Rotate3d 
سنقوم بعدة امثلة حول كيفية استعمال هذه الخاصية وستكون بالتدريج من البسيط الى المعقد.

المثال الأول Rotate او RotateZ

Transform:Rotate = Transform:RotateZ
في هذه الحالة سوف نطبق اوجه مختلفة ل Transform:Rotate العادية والتي تساعد على تدوير عنصر Html محدد في اي زاوية وفي هذا المثال سوف نطبقها على عنصر div .

<div id="num1">Rotate(20deg)</div>
<div id="num2">Rotate(45deg)</div>
<div id="num3">Rotate(90deg)</div>
#num1{
width: 200px;
height: 100px;
border:solid 1px #000000;
transform: rotate(20deg);
}
#num2{
width: 200px;
height: 100px;
border:solid 1px #000000;
transform: rotate(45deg);
}
#num3{
width: 200px;
height: 100px;
border:solid 1px #000000;
transform: rotate(90deg);
}

Rotate(20deg)
Rotate(45deg)
Rotate(90deg)


المثال الثاني RotateX

في هذا المثال سوف نشرح RotateX و التأثيرات التي يمكن القيام بيها من خلاله ولكي ترى التأثير سوف نقوم بالتطبيق على صورة قط.

<img id="normal" src="CatPhoto.jpg" alt="" width="300px">
<img id="RX1" src="CatPhoto.jpg" alt="" width="300px">
<img id="RX2" src="CatPhoto.jpg" alt="" width="300px">
#normal{
    /* هذه الصورة لم نطبق عليها الخاصية لكي تقارنها مع الصور الأخرى */
}
#RX1{
    transform: rotateX(70deg);
}
#RX2{
    transform: rotateX(180deg);
}


المثال الثالث RotateY

سوف نطبق RotateY على صورة قط لكي يظهر التأثير بوضوح

<img id="normal" src="CatPhoto.jpg" alt="" width="300px">
<img id="RY1" src="CatPhoto.jpg" alt="" width="300px">
<img id="RY2" src="CatPhoto.jpg" alt="" width="300px">
#normal{
    /* هذه الصورة لم نطبق عليها الخاصية لكي تقارنها مع الصور الأخرى */
}
#RY1{
    transform: rotateY(70deg);
}
#RY2{
    transform: rotateY(180deg);
}


المثال الرابع Rotate3d

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

<img id="Caty" src="CatPhoto.jpg" alt="" width="300px">
#Caty{
    transform:rotate3d(3, 12, 7, 151deg);
}



وهنا يكون الشرح قد انتهى والسلام عليكم
Tags:

إرسال تعليق

أحدث أقدم