لم أستطع الانتظار للحصول على بعض الوقت "المجاني" حتى أتمكن من إضافة التصميم إلى مشروعي. شيء عن القليل من التفاعل يضيف الحياة إلى الصفحة.

هل تريد قطة عائمة؟ لا مشكلة. لقد صنعت صورة لقطة باستخدام الذكاء الاصطناعى واستخرجت الخلفية في Illustator "باليد" للحصول على تأثير قطع لطيف لصورة .png. بام. قطة.

دعنا نجعله يتحرك قليلاً حتى يبدو أنه يطفو. واحدة من الرسوم المتحركة CSS المفضلة لدي هي المدار. إنه مفيد حقًا ويمكنك فعل الكثير معه.

قطة

في العرض ، أحضر صورة قطتي وأخصيتها "CAT"

الآن ، في ملف CSS الخاص بي ، أقوم ببناء أسلوبي لـ "Cat". في القط ، نسمي الرسوم المتحركة لدينا ، مدار ، كما هو موضح أدناه.

.cat {
  animation: orbit 3s infinite linear;
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(15px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(15px) rotate(-360deg);
  }
} 

ترى هنا أننا "ندير القطة تبدأ بزاوية 0 درجة" ، عند 15 بكسل بعيدًا عن X-Origin ، بدءًا من 0 درجة.

تنقل القط دائرة كاملة إلى 360 درجة ، عند 15 بكسل ، على طول الطريق. الدوران الثاني من -360 هو إلغاء الدوران الأول ، للحفاظ على القطة في وضع مستقيم. من الأسهل إذا رأيت الرسوم المتحركة فقط. XD.

نحن فقط نحركه كمية صغيرة ، لأننا لا نريده أن يطير في جميع أنحاء الصفحة. يكفي فقط لتكون مثيرة.

قليلا إلى اليسار ،



قليلا إلى اليمين.

سحر!

مكعب

كنت قد تعلمت سابقًا كيفية إنشاء مكعب مع CSS. في حين أن هذا جيد وداندي ، حصلت على فكرة الشعر البري اليوم حول إعادة استخدام المكعب بطريقة ديناميكية. كنت أرغب في ملء الوجوه المكعب بالبيانات في الوقت الفعلي. كما يقول ، الأحداث القادمة القادمة القادمة. مثل المرح اكتشاف شيء على الصفحة المقصودة. ولم لا. هذا مثير.

لذا مثل أي شيء ، أقوم ببناء الهيكل العظمي في العرض. المكعب لدينا يحتاج إلى منزل بعد كل شيء.

لدي بعض أزرار الراديو حتى يتمكن المستخدم من التفاعل مع المكعب.

سيظهر كل زر راديو وجه مكعب مختلف.

أضيف المعلومات التي أريد عرضها على كل وجه في حلقة:

  







Handling the css is a bit of a dance. Especially with viewports and what not. This is not the answer for mobile but it will work and be functional on a bigger screen, LOL. I'm just gonna leave this here for you. Open to suggestions for handling a small screen size. 













/*===========
rotating cube
==============*/

.cube-container {
  width: 30vw;
  height: 40vh;
  text-align: center;
  perspective: 100em;    
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  border: 5px solid transparent;  
  margin-top:100px; 
  display: block;
}

.cube-side {
  position: absolute;
  width: 300px;
  height: 300px;
  background-color: rgb(64, 0, 148);
  border: 1px solid white;
  background-position: center;
  background-size: cover;
  border: 4px solid lime;
}

.cube-side:nth-child(1){
  transform: rotateY(0deg) translateZ(10em);
}

.cube-side:nth-child(2){
  transform: rotateY(90deg) translateZ(10em);
}

.cube-side:nth-child(3){
  transform: rotateY(180deg) translateZ(10em);
}

.cube-side:nth-child(4){
  transform: rotateY(-90deg) translateZ(10em);
}

.cube-side:nth-child(5){
  transform: rotateX(90deg) translateZ(9.75em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}

.cube-side:nth-child(6){
  transform: rotateX(-90deg) translateZ(9.3em);
  border-top: 8px solid lime;
  border-bottom: 8px solid lime;
}


/* cube radio buttons */

.radio-button {
  transform: translateX(-50px);
}

.radio-button:checked ~ .cube{
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19. 1, 0.22, 1);
}

.radio-button:nth-child(1):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(20deg);
}

.radio-button:nth-child(2):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(180deg);
}

.radio-button:nth-child(3):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(90deg);
}

.radio-button:nth-child(4):checked ~ .cube {
  transform: rotateX(-15deg) rotateY(-90deg);
}

.radio-button:nth-child(5):checked ~ .cube {
  transform: rotateX(-105deg) rotateY(0deg);
}

.radio-button:nth-child(6):checked ~ .cube {
  transform: rotateX(75deg) rotateY(0deg);
}






 يتم التعامل مع كل زر وجانب بشكل فردي. أحب أن أرى حلًا أكثر أناقة إذا كان موجودًا. 

 أنا متحمس حقًا لأنه نجح. 

 شكرًا على البحث!