How to convert a CSS3 2D animatuon to a 3D Transform -

How to convert a CSS3 2D animatuon to a 3D Transform -

i have worked out how move image using css3 in 2d. however, can not work out how convert motion in 3d. have read on transforms flipping , rotating. want move.

my 2d css is:

.roundballmove { width: 20px; height: 20px; position: relative; border-radius: 10px; -webkit-animation: roundballmove 20s; /* chrome, safari, opera */ animation: roundballmove 20s; } /* chrome, safari, opera */ @-webkit-keyframes roundballmove { 0% {background:white; left:295px; top:300px;} 50% {background:white; left:295px; top:450px;} 100% {background:white; left:10px; top:10px;} } /* standard syntax */ @keyframes roundballmove { 0% {background:white; left:295px; top:300px;} 50% {background:white; left:295px; top:450px;} 100% {background:white; left:10px; top:10px;} }

what shows ball starting pitcher, beingness pitched , nail left field. nail left field should fly ball (i.e., arch in 3d trajectory).

i appreciate if can tell me how fly in arch (3d trajectory) instead of straight line when hit.

regards,

glyn

what have done create new container contain image , rotated container.

the java code is:

//run play when "play ball" button selected. 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 css3 is:

.roundball3dmove { width: 295px; height: 220px; position: relative; background: grey; /* can see happening - remove */ 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 { { -webkit-transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg); } { -webkit-transform: rotate3d(1, 0, 0, 180deg) rotate3d(0, 1, 0, 180deg) rotate3d(0, 0, 1, 180deg); } } /* other browsers */ @keyframes roundball3dmove { { -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); } { -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 gets motion in 3d. have work ball go want it. also, @ end of animation ball returns started. not want this. post question this. however, if 1 know how maintain ball @ destination grateful if allow me know. ball starts in lower right of container , want rotate container in x, y, z axis ball ends in top left corner.

regards,

glyn

css3 3d