‫‪CSS – LECT 7‬‬

‫برمجة الواجهات االمامية ‪FRONT-END‬‬

‫محمود دكه ‪-‬مركز الهمص للتدريب‬
 TRANSITIONS
‫• عمل على التحكم في االنتقال من خاصية لخاصية أخرى‬
‫• خصائص االنتقال‬
• transition: <property> | <Duration> | <timing function> | <Delay>
• property: ‫الخاصية‬
• duration: ‫وقت اإلنتقال‬
• timing function : ‫طريقة التنفيذ‬
• Delay: ‫كم يتأخر عن الحركة علشان ينفذ تأثير اإلنتقال‬

• https://www.w3schools.com/css/css3_transitions.asp
 TRANSITIONS
• timing function : ‫طريقة التنفيذ‬
 ‫‪TRANSITIONS‬‬
‫طريقة التنفيذ ‪• timing function :‬‬
‫• ‪Steps :‬يبدأ على خطوات وينتهي على خطوات دون ‪Smooth‬‬
 CSS3 – TRANSITIONS
• timing function : ‫طريقة التنفيذ‬
 ‫‪2D TRANSFORMS‬‬
‫)‪• translate(x , y) // (0px,0px‬‬
‫)‪• translateX(x‬‬
‫)‪• translateY(y‬‬
‫• يقوم بتحريك العنصر ملسافة معينة على محور ‪ X‬ومحور ‪Y‬‬
‫• يقبل قيمة موجبة او سالبة‬
‫• على سبيل املثال‬
‫)‪• translate(20px , 30px‬‬

‫• يمكن استخدام اكثر من خاصية ولكن في نفس السطر‬

 ‫‪2D TRANSFORMS‬‬
‫)(‪• rotate‬‬
‫دوران العنصر على محور ‪z‬‬ ‫•‬
‫قيمة الدوران تكون بالدرجة تبد من ‪ 0‬الى ‪deg 360‬‬ ‫•‬
‫يقبل قيمة موجبة (مع عقارب الساعة) او سالبة (عكس عقارب الساعة)‬ ‫•‬
‫يمكن لف العنصر اكثر من لفة كامل‬ ‫•‬
‫• ‪ * 360‬عدد مرات اللفة‬
‫• على سبيل املثال‬
‫)‪• Rotate(45deg‬‬
‫)‪• Rotate(-90deg‬‬
‫)‪• Rotate(720deg‬‬
 ‫‪2D TRANSFORMS‬‬
‫)‪• scale(x,y‬‬
‫تمدد العنصر على محور عرضا (‪ ) x‬وطوال (‪)y‬‬ ‫•‬
‫القميه االفتراضية لخاصية )‪(1 , 1‬‬ ‫•‬
‫القيمة الصفرية تخفي العنصر‬ ‫•‬
‫يقبل قيمة موجبة او سالبة (تمدد العنصر ولكن بقلب االتجاه )‬ ‫•‬
‫على سبيل املثال‬ ‫•‬
‫الحجم االصلي ‪• scale(1,1) //‬‬
‫تكبير الحجم ضعفين ‪• scale(2,2) //‬‬
‫قلب اتجاه العنصر على املحور افقيا دون تمدد ‪• scale(-1,1) //‬‬
 ‫‪2D TRANSFORMS‬‬
‫)‪• skew(x , y) // (0 , 0‬‬
‫)‪• skewX(x‬‬
‫)‪• skewY(y‬‬
‫• ميالن العنصر بزوايا ‪ deg‬على محور ‪ X‬او محور ‪Y‬‬
‫• يقبل قيم موجبة او سالبة‬
‫• على سبيل املثال‬
‫)‪• skew(30deg , -10deg‬‬
‫‪• skew(30deg) // x:30‬‬
 2D TRANSFORMS
• matrix()
‫• جمع جميع خصائص التحويل‬
• matrix( scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY() )
 2D TRANSFORMS EXAMPLES
‫• مثال‬
• https://codepen.io/rachelcope/pen/mhkgr
• https://codepen.io/deadcoder0904/pen/VwLYwgv
 3D TRANSFORMS
• transform: rotateX(50deg);
X ‫• عمل دوران على محور‬
• transform: rotateY(50deg);
Y ‫• عمل دوران على محور‬
• transform: rotateZ(50deg);// rotate 2d
Z ‫• عمل دوران على محور‬
• transform: rotate3D(x , y , z , deg);
• transform: rotate3d(0, 1, 1, 90deg); // ‫ دوران على محور‬z
 3D TRANSFORMS
• transform: translateX(200px);
X ‫• نقل العنصر على محور‬

• transform: translateY(200px);
Y ‫• نقل العنصر على محور‬
 ‫‪3D TRANSFORMS‬‬
‫;)‪• transform: translateZ(200px‬‬
‫تقريب العنصر الى الشاشة بمقدار ‪px200‬‬ ‫•‬
‫ال يظهر التأثير لكي يظهر التأثير يجب إضافة املنظور‬ ‫•‬
‫‪ -1‬إضافة منظور الب العنصر ;‪perspective: 600px‬‬ ‫•‬
‫‪ -2‬او اضافة في نفس الكود‬ ‫•‬
‫;)‪• transform: perspective(600px) translateZ(200px‬‬
 3D TRANSFORMS
• transform: translate3d(x , y , z);

• transform: translate3d(0);

• transform: perspective(500px) translate3d(10px, 0, 0px);

 3D TRANSFORMS

• transform: scaleX(0.6); ‫تقليص على املحور السين‬

• transform: scaleY(2); ‫تكبير على املحور الصادي‬

• transform: scale(0.7);
• scaleX(0.7) scaleY(0.7)
‫على املحورين السيني والصادي‬ •
 3D TRANSFORMS

• transform: scaleZ(2); ‫تكبير على املحور‬

‫• يجب إضافة منظور باإلضافة لخاصيى الدوران حتى تعمل الخاصية‬
•
• transform: perspective(600px) scaleZ(2)
ratotY(10deg);
 PERSPECTIVE

• Perspective ‫املنظور‬
• perspective- origin ‫موضع املنظور‬
• Transform-origin ‫موضع العنصر‬
• X axis = left center right Length
• Y axis = top center bottom Length
• Transform-style: ‫شكل‬
 3D TRANSFORMS

• transform: matrix3d(2,0,0.00,0,0.00,2,0.00,0,0,0,1,0,0,0,0,1);

• perspective: 300px;
3D TRANSFORMS EXAMPLES

• https://codepen.io/vineethtrv/pen/XKKEgM
• https://codepen.io/rachelcope/pen/bNjGrL
• https://codepen.io/nazarelen/pen/EaNbLX
 ‫مواقع مفيدة‬

• http://ds-overdesign.com/transform/matrix3d.html
• https://www.html-code-generator.com/css/transform-
generator

• https://cssgradient.io

• http://angrytools.com/css-generator/transform/
• https://enjoycss.com
• https://www.shapedivider.app
 ANIMATIONS
animation-name *
animation-duration *
ANIMATIONS
 ANIMATIONS
Animation-direction
 ANIMATIONS
Animation-iteration-count ‫تكرار االنيميشين‬
• Number
• Infinite

Animation-delay ‫تاخير االنيميشين‬

 ANIMATIONS
Animation-
fill-mode
 ANIMATIONS
div { div {
animation-name: example , move; animation: example 5s linear 0s
animation-duration: 5s , 3s; infinite alternate ,
animation-timing-function: linear; move 2s ease 5s infinite alternate
animation-delay: 2s; ;
animation-iteration-count: infinite; }
animation-direction: alternate; ‫الكود املختصر‬
}

‫الكود املفصل‬
‫مكتبات جاهزة الينميشين‬
‫• ‪https://animate.style/‬‬