الدوران بمقدار زاوية : css, js

Hadi Hasan · 8 أكتوبر 2022

مرحباً

الخاصية : ;transform: rotateY(90deg)

تحدد مقدار الزاوية التي سوف يكون العنصر عندها وليس مقدار دوران العنصر , هل يوجد طريقة لتحديد مقدار الدوران أينما تواجد العنصر في زاوية ما ؟

بعبارة أخرى : إذا دار العنصر من 0 درجة إلى 270 درجة ثم أردت إعادته إلى 0 يجب وضع الزاوية 360 و ليس 0 وإلا دار باتجاه معاكس و بالتالي إذا كان هناك عدد لا نهائي من اللفات يتم بواسطة ضغط زر يجب أن نضع مضاعفات 360 حتى لا ينعكس اتجاه الدوران وهذا لا نهائي غير ممكن .

أريد طريقة مثل scrollTo ليتحرك السكرول بمقدار محدد وليس إلى موضع محدد .

Hadi Hasan · 8 أكتوبر 2022

شكراً لكم

نجح معي هذا الحل : animation-fill-mode: forwards

يحافظ العنصر على آخر حركة ويستمر بالدوران بنفس الاتجاه

علي عبد محسن · 8 أكتوبر 2022

يمكنك إستعمال مكتبة Propeller لعمل دوران عنصر معين من خلال التحكم بخصائص الدوران من سرعة وزاوية وغيرها. في المثال أدناه لدينا زر عند الضغط عليه يستدعي دالة التدوير rotate وهي user defined function لتقوم بتدوير العنصر من موضع دورانه. بالطبع يمكنك الإستغناء عن هذا كله والتدوير بالماوس مباشرة أو بالإصابع في حالة touch devices.

تحتاج تحميل المكتبة من الصفحة الرسمية هنا ثم تقوم بإستخراج الملف propeller.min.js من الحزمة ووضعه في مسار ملف المثال التالي

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <style>
        /* تعيين قيم css */
        .wrapper{
            padding: 10%;
            width: inherit;
            height: inherit;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cube{ /* تصميم مكعب أحمر*/
            width:200px;
            height: 200px;
            background-color: brown;
            border-radius: 5px;
        }


    </style>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <!--propeller  الضرورية لعمل المكتبة  jQuery نتأكد من وجود  -->
</head>
<body>
<div class="wrapper">

    <div class="cube rotate-this"  id="cube1" ></div>

    <button onclick="rotate()">Rotate</button>
    <!-- هنا نعرف زر التدوير ونربطة بدالة التدوير -->

</div>
<!-- نقوم بإستيراد المكتبة من مسار المشروع الرئيسي حيث وضعناها  -->
<script src="./propeller.min.js"></script>
<script>
    var rotateElement = document.getElementById('cube1'); // نقيد العنصر المراد تدويره في متغير

    let x= new Propeller(rotateElement , {}); // ننشئ عامل التدوير ونضعه في متغير
    function rotate(){ // ننشئ دالة نقوم بإستدعاءها مع كل ضغطة زر لتعديل متغيرات التدوير المرتبطة بعامل التدوير

        x.inertia=0.98
        x.speed=0.5
        x.step=1
    }
</script>
</body>
</html>

Ahmed Sadek Elamine Touahria · 8 أكتوبر 2022

بتاريخ 31 دقائق مضت قال Hadi Hasan:

مرحباً

الخاصية : ;transform: rotateY(90deg)

تحدد مقدار الزاوية التي سوف يكون العنصر عندها وليس مقدار دوران العنصر , هل يوجد طريقة لتحديد مقدار الدوران أينما تواجد العنصر في زاوية ما ؟

بعبارة أخرى : إذا دار العنصر من 0 درجة إلى 270 درجة ثم أردت إعادته إلى 0 يجب وضع الزاوية 360 و ليس 0 وإلا دار باتجاه معاكس و بالتالي إذا كان هناك عدد لا نهائي من اللفات يتم بواسطة ضغط زر يجب أن نضع مضاعفات 360 حتى لا ينعكس اتجاه الدوران وهذا لا نهائي غير ممكن .

أريد طريقة مثل scrollTo ليتحرك السكرول بمقدار محدد وليس إلى موضع محدد .

يمكنك تغيير الوحدة من deg إلى turn

transform: rotateY(5turn);

Adnane Kadri · 8 أكتوبر 2022

ما تحاول القيام به غير منطقي فدورة بمقدار 360deg تمثل دورة كاملة لا تعبر إلا على 2π، نفس الأمر بالنسبة لأي مضاعف للدرجة 360 او 2π لطالما أن محور الدوران هنا هو المحور Y الثابت. فإذا أكمل العنصر مقدار 3π/4 من دورة أو 270 أو أي من مضاعفاتها فإنه سيحتاج مكملها إلى 2π فقط، وهو π/4 أو 90 أو أي من مضاعفاتها.

الفكرة هنا، هي في أن الموضوع لا يجب أن يرى كدرجات. تخيل محور دوران العنصر كالمحور Y في الدائرة المثلثية. فأي موضع أصبح فيه العنصر من الدائرة، لن يخرج عن كونه ضمن الدائرة، ومهما كان عدد اللفات فهو سيعبر دوما عن نسبة معينة من لفة واحدة.

أتخيل أنك تريد تطبيق حركية على عنصر بتزويدك للقيمة التي تسندها للدالة rotateY بمقدار معين، وقد واجهت مشكلة بسبب عدم امكانية تزويد القيمة بشكل متناهي.

ان كنت تحاول تجنب هذا الموضوع، فلن يكون عليك إلا الاستفادة بشكل أو بآخر من الخاصية animation-iteration-count في css التي تحدد عدد مرات تكرار الدورة حتى توقف الحركة. من بين القيم التي تقبلها infinite.

لمقاربة نفس النتيجة، أنشئ عنصرا:

يقوم بالدوران حول المحور Y دورة كاملة.
يسير في اتجاه عادي.
يدور بشكل لا متناهي.

إليك المثال:

<div>
Hsoub Academy
</div>

div{
  background: red;
  animation: rotateDiv 5s linear infinite normal;
}
@keyframes rotateDiv{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}

الخاصية animation

Hadi Hasan · 8 أكتوبر 2022

بتاريخ منذ ساعة مضت قال Adnane Kadri:

بتاريخ منذ ساعة مضت قال Ahmed Sadek:
يمكنك تغيير الوحدة من deg إلى turn
transform: rotateY(5turn);

المشكلة نفسها تماماً , هذه الواحدة تعني الإنتقال إلى زاوية مقدارها 5 لفات , و ليس بمقدار 5 لفات .

بتاريخ منذ ساعة مضت قال Ahmed Sadek:

بتاريخ منذ ساعة مضت قال Adnane Kadri:
ما تحاول القيام به غير منطقي فدورة بمقدار 360deg تمثل دورة كاملة لا تعبر إلا على 2π، نفس الأمر بالنسبة لأي مضاعف للدرجة 360 او 2π لطالما أن محور الدوران هنا هو المحور Y الثابت. فإذا أكمل العنصر مقدار 3π/4 من دورة أو 270 أو أي من مضاعفاتها فإنه سيحتاج مكملها إلى 2π فقط، وهو π/4 أو 90 أو أي من مضاعفاتها.

الفكرة هنا، هي في أن الموضوع لا يجب أن يرى كدرجات. تخيل محور دوران العنصر كالمحور Y في الدائرة المثلثية. فأي موضع أصبح فيه العنصر من الدائرة، لن يخرج عن كونه ضمن الدائرة، ومهما كان عدد اللفات فهو سيعبر دوما عن نسبة معينة من لفة واحدة.

أتخيل أنك تريد تطبيق حركية على عنصر بتزويدك للقيمة التي تسندها للدالة rotateY بمقدار معين، وقد واجهت مشكلة بسبب عدم امكانية تزويد القيمة بشكل متناهي.

ان كنت تحاول تجنب هذا الموضوع، فلن يكون عليك إلا الاستفادة بشكل أو بآخر من الخاصية animation-iteration-count في css التي تحدد عدد مرات تكرار الدورة حتى توقف الحركة. من بين القيم التي تقبلها infinite.

لمقاربة نفس النتيجة، أنشئ عنصرا:

يقوم بالدوران حول المحور Y دورة كاملة.

يسير في اتجاه عادي.

يدور بشكل لا متناهي.

إليك المثال:
<div>
Hsoub Academy
</div>
div{
  background: red;
  animation: rotateDiv 5s linear infinite normal;
}
@keyframes rotateDiv{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}
الخاصية animation

شكرا على إجابتك, لكن هذا الكود أعرفه وليس هو ما أريد, جرب أن تضع زر يدوّر العنصر 90درجة فقط, ليدور دوما بنفس الاتجاه .

سيكون عليك ان تضع الزوايا بالتسلسل التالي : 0 ,90 ,180 ,270 ,360 ,450 , ....إلى لا نهاية .

إذا حاولت أن تعود الحركة إلى الزاوية 0 كما فعلت أنا , سيتغير اتجاه الحركة مرة واحدة كل لفة كاملة . ستعلم عندها أن الأمر لم يكن دوران بمقدار معين بل دوران إلى زاوية محددة .

تم التعديل في 8 أكتوبر 2022 بواسطة Hadi Hasan

Hadi Hasan · 8 أكتوبر 2022

بتاريخ 1 ساعة قال Adnane Kadri:

إليك المثال:


<div>
Hsoub Academy
</div>


div{
  background: red;
  animation: rotateDiv 5s linear infinite normal;
}
@keyframes rotateDiv{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}

الخاصية animation

أما في هذا المثال فما يحدث هو أن العنصر يدور 360 درجة ثم تنتهي الحركة الأولى فيعود العنصر إلى وضعه الأصلي بدون دوران بل بشكل مباشر ثم تبدأ الحركة الثانية و هكذا فنتخيل أنه استمرار بالحركة .

الدوران بمقدار زاوية : css, js

السؤال

Hadi Hasan

6 أجوبة على هذا السؤال

Recommended Posts

Hadi Hasan

علي عبد محسن

Ahmed Sadek Elamine Touahria

Adnane Kadri

Hadi Hasan

Hadi Hasan

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية