اذهب إلى المحتوى

السؤال

نشر

السلام عليكم.

في المثال التالي، عندما أقوم بhover للعنصر أريد أن يكون إتجاه التحريك من الأسفل إلى الأعلى. 

Capture.JPG.04300c2e89c8fd20d269d76afb1aafda.JPG

ملاحظة: التحريك في هذه الحالة من الأعلى للأسفل

شيفرة css:

div{

    margin: 30px auto;

    background-color: #5FD068;

    width: 40%;

    height: 30px;

    border-radius: 10px;

    font-size: 40px;

    /* height: 0; */

    transition: height 2s;

}

div:hover{

    height: 300px;

}

شكرا لكم.

Recommended Posts

  • 0
نشر

للتحريك من الاسفل للأعلى يجب استخدام ال transform : 

div {
  margin: 30px auto;

  background-color: #5fd068;

  width: 40%;

  height: 30px;

  border-radius: 10px;

  font-size: 40px;

  /* height: 0; */

  transition: transform 2s;
  transform-origin: bottom center;
}

div:hover {
  transform: scaleY(2);
}

حيث لا تستطيع التحكم باتجاه الحركة عند استخدام ال height لذلك نذهب لـ transform: scaleY(2) بدلاً عنها لأنها تمكننا من التحكم بال transform-origin، وبالتالي التحكم باتجاه الحركة.

إن كنت مهتم بالتحريك يمكنك قراءة هذا المقال عن ال animations : 

 

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...