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


Tags: css3,3d

Problem :

I have worked out how to move an image using CSS3 in 2D. However, I can not work out how to convert this to movement in 3D. I have read up on transforms however they are all about flipping and rotating. I want to 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 this shows is a ball starting with the pitcher, being pitched and then hit to left field. The hit to left field should be a fly ball (i.e., an arch in 3D trajectory).

I would really appreciate it if someone can tell me how to get this to fly in an arch (3D trajectory) instead of a straight line when hit.

Regards,

Glyn



Solution :

What I have done is to create a new container to contain the image and rotated the container.

The java code is:

//Run the play when the "Play Ball" button is 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; /* So I can see what is 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 {
    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 gets a movement in 3D. I have some work to do to get the ball to go exactly where I want it. Also, at the end of the animation the ball returns to where it started. I do not want this. I will post another question for this. However, if any one know how to keep the ball at the destination I would be very grateful if you could let me know. The ball starts in the lower right of the container and I want to rotate the container in x, y, z axis so the ball ends up in the top left corner.

Regards,

Glyn


    CSS Howto..

    Overwriting a CSS Class How to?

    How to populate JSON response values in Jquery

    responsive CSS - How to I make padding adjust automatically when visiting my site with an iPhone?

    CSS How to display a single icon out of a matrix for a list item

    How can I make two divs stack whilst still having my text wrap without media queries

    How do i change the styling of a nodes CSS through javascript(d3)

    How To Create Full Screen Fixed With Scrolling Background Images

    How can I prevent wild scrolling when a fixed position text input form field gains focus?

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    How to limit jquery selectable to 1 tr and pass selected items to another page

    How to make a div align with a specific td on the page?

    How to Mask Images with Dynamic Sizes to Shapes?

    how to do external scripting?

    css how to define a class for table to control the style of table rows

    HTML Tables - how can I make all cells other than the last always be wide enough?

    how to call all Google font CSS under specific font face

    How can I programmatically (in JavaScript) add “sub-divs” to divs?

    How to space children evenly horizontally in css

    How to change qunit theme / layout

    How to hide the first element on the page with particular css class? [duplicate]

    How can i add a line-break on a costume tooltip?

    How to display two columns of blocks with CSS

    How to float text on image in css3

    How to get 'hover' and 'active' states working with CSS and HTML?

    How can I use d3.js filter to assign different css classes to elements?

    How to align buttons properly in css/asp.net?

    HTML or CSS, how is this done? [closed]

    How to queue CSS3 animations when shown after page scroll (JSFiddle provided)

    How to avoid messing formating up?

    How can I instantly stop a CSS animation on hover?