CSS3 2D 애니매이션을 3D 변형으로 변환하는 방법

Question

2D에서 CSS3를 사용하여 이미지를 이동하는 방법을 알아 냈습니다. 그러나 이것을 3D로 변환하는 방법을 알아낼 수는 없습니다. 나는 변형에 대해 읽었지만 모두 뒤집기와 회전에 관한 것이다. 나는 움직이고 싶다.

내 2D CSS는 다음과 같습니다

.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;} 
} 

는 이것이 표시하는 투구되는 투수로 시작하는 공이고, 그 다음 왼쪽 필드로했다. 왼쪽에서 왼쪽으로 치는 부분은 파리 공 (즉, 3D 궤도의 아치)이어야합니다.

누군가가 내게 말할 때 이걸 어트랙션 할 때 직선 대신 아치 (3D 궤적)로 비행하는 법을 알면 정말 고맙겠습니다.

감사합니다, 내가 무슨 짓을

글린

Answer 1

이미지를 포함하는 새로운 컨테이너를 생성하고 컨테이너를 회전.

자바 코드는 다음과 같습니다

//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); 

       } 
      } 
     }); 

CSS3은 다음과 같습니다

.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); 
    } 
    } 

이 3D로 운동을 가져옵니다. 나는 공을 내가 원하는 곳으로 가도록하기 위해 할 일이있다. 또한 애니메이션이 끝나면 볼은 시작 지점으로 돌아갑니다. 나는 이것을 원하지 않는다. 나는 이것을 위해 또 다른 질문을 게시 할 것이다. 그러나 어떤 사람이 목적지에 공을 지키는 방법을 안다면 나에게 알릴 수 있다면 매우 감사 할 것입니다. 볼은 컨테이너의 오른쪽 아래에서 시작하고 x, y, z 축으로 컨테이너를 회전하여 볼이 왼쪽 상단 모서리에 오도록합니다.

감사합니다,

글린