I'm attempting to create a basic 2-sided cube rotation. Following the rotation, my goal is to click on one of the sides and have its height increase. However, I've run into an issue where the transition occurs from the middle instead of from the top down as a height transition normally would. To address this, I experimented with changing the transform-origin.
Another problem arises when I change it to 90 degrees - upon mouse movement, it triggers mouseleave and alternates between the two states, causing issues with the click event functionality as well.
.cube.active {
-webkit-transform: rotateX(89deg);
transform: rotateX(89deg); /* Text bleed at 90º */
}