CSS

CSS – التحویلات الھندسیة وخصائص الحركة

أولاً : التحویلات الھندسیة ذات البعدین 2D

transform الخاصیة

وھي تأخذ احد ھذه التوابع الموضحة في الجدول

مثال:

div { -webkit-transform:skew(30deg , 20deg);
width:100px; height:75px;
background-color:red; }

ملاحظة/ الحرف ( deg ( في المثال السابق التي تم تمریرھا بعد الارقام إلى تابع التحویل تعني
درجة ( degree( وذلك تمییزا ً عن الرادیان والذي یرمز لھ بالأحرف ( rad . (

ثانیاً :- التحویلات الھندسیة ثلاثیة الأبعاد 3D

transform الخاصیة

تتم التحویلات ثلاثیة الأبعاد بنفس الخاصیة السابقة ( transform ( لكن تأخذ ھذه التوابع
المختلفة قلیلا ً

ثالثاً : الانتقال المتحرك

transition:

یمكن إنشاء تأثیر حركة على عناصر المستند تحت تأثیر زمني معین والذي یتم تحقیقھ عبر ھذه
الخاصیة ( transition ( والصیغة العامة لھا ھي :

transition:property1 duration1 , property2 duration2 , …… etc ;
حیث أن property تمثل اسم الخاصیة التي ستتغیر و duration تعبر عن الزمن , ویمكن
تغییر خاصیة واحدة فقط أو عدة خواص معا ً او كل الخواص وسنكتب all وبعدھا الزمن .

مثال:

<html> <head>
<style type="text/css" >
div { width:100px;
 height:100px;
 background:red;
 -webkit-transition:width 2s , height 2s; }
div:hover { width:200px;
 height:200px;
 -webkit-transform:rotate(180deg); }
</style> </head> <body>
<div> Hello world </div>
 </body> </html>

حیث إن s تشیر إلى الثانیة second