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

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

مرحباً

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

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

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

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

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

transform: rotateY(5turn);

ما تحاول القيام به غير منطقي فدورة بمقدار 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

بتاريخ منذ ساعة مضت قال 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 كما فعلت أنا , سيتغير اتجاه الحركة مرة واحدة كل لفة كاملة . ستعلم عندها أن الأمر لم يكن دوران بمقدار معين بل دوران إلى زاوية محددة  .

بتاريخ 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 درجة ثم تنتهي الحركة الأولى فيعود العنصر إلى وضعه الأصلي بدون دوران بل بشكل مباشر ثم تبدأ الحركة الثانية و هكذا فنتخيل أنه استمرار بالحركة .

يمكنك إستعمال مكتبة 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>

شكراً لكم

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

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