أولاً : التحویلات الھندسیة ذات البعدین 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
