Fix Cube3D unnatural rotation and orbit

Open Beginner friendly
#47 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css, typescript
Domain
frontend

Research direction

Locate the Cube3D component and its face positioning styles and tumble keyframes. Check the current transform origin and X/Y-only animation first, then verify that faces are centered, rotation includes X, Y, and Z axes, and hovering pauses the animation.

Written by the indexing model from the issue text.

Description

The Cube3D component rotates off-center because the geometric center of the faces is not aligned with the container transform origin. The rotation animation is also restricted to X and Y axes, making it look unnatural.

Changes needed:

  • Center faces using top/left 50% and negative margins.
  • Update tumble keyframes to use X, Y, and Z axes for a smoother rotation.
  • Add hover state to pause the rotation.
Dominant language
TypeScript
Stars
8
Forks
1
No merged PRs in 30d

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from PICT-OSS-Community/Website

All issues in PICT-OSS-Community/Website

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.