A new container was created to hold the image and then rotated for the desired effect.
Below is the Java code snippet:
//Trigger the "Play Ball" action when the button is clicked.
runButton.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent event) {
if (play == 1) {
//play1();
moveBallContainer.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_RIGHT);
moveBallContainer.setVerticalAlignment(HasVerticalAlignment.ALIGN_BOTTOM);
moveBallContainer.add(img);
absolutePanel.add(moveBallContainer, 5, 200);
moveBallContainer.addStyleName("roundBall3DMove");
answerTextBox1.setCursorPos(0);
}
}
});
The corresponding CSS3 code is as follows:
.roundBall3DMove {
width: 295px;
height: 220px;
position: relative;
background: grey; /* Added for visualization - can be removed */
border-radius: 0px;
perspective: 500px;
-webkit-animation-name: roundBall3DMove;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 2s;
animation-name: roundBall3DMove;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-duration: 2s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.roundBall3DMove:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes roundBall3DMove {
from { -webkit-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); }
to { -webkit-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); }
}
/* all other browsers */
@keyframes roundBall3DMove {
from {
-moz-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
-ms-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
}
to {
-moz-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg);
-ms-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg);
transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg);
}
}
This implementation achieves a 3D movement effect. Further adjustments are needed to precisely position the ball as desired. Additionally, the animation currently returns the ball to its initial position at the end, which requires correction. A separate question will be posted for this issue. Any insights on how to maintain the ball at the target location are welcomed. Initially, the ball is positioned in the lower right of the container, with the aim of rotating the container around x, y, and z axes to have the ball end up in the top left corner.
Best regards,
Glyn