I have been tasked with replicating this specific object for a project. The creation process is going smoothly, but now the requirement is to make it stop when the user hovers over it. Implementing this hover functionality is not a problem as CSS provides the :hover selector. However, the challenge arises when the object stops abruptly in its current position upon hover.
My query pertains to finding a solution that allows the face (or plane in terms of the code) to smoothly complete its movement back to the center of the screen upon user hover. For instance, if the user is in ring mode (after clicking toggle shape on the site) and hovers over the number 3, I envision the face moving slowly back to the center, adjusting left or right as needed. As someone relatively new to CSS animations, I am unsure of the method to achieve this effect.
Below is the code I have developed thus far:
/* CSS code snippet */
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div id="stage">
<div onclick="toggleShape()" id="shape" class="cube backfaces">
<div id="1" onmouseover="ringHoverOver(this)" class="plane one">$3M</div>
<div id="2" class="plane two">$175K</div>
<div id="3" class="plane three">2K</div>
<div id="4" class="plane four">Thousands</div>
<div id="5" class="plane five">30</div>
<div id="6" class="plane six">20+</div>
<div id="7" class="plane seven">25</div>
<div id="8" class="plane eight">Hundreds</div>
<div id="9" class="plane nine">Tens of Thousands</div>
<div id="10" class="plane ten">Dozens</div>
<div id="11" class="plane eleven">15+</div>
<div id="12" class="plane twelve">All </div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
// JavaScript code snippet
</script>