Turning a two-dimensional CSS3 animation into a three-dimensional transformation

After successfully mastering movement of an image in 2D using CSS3, I'm now faced with the challenge of translating this into 3D movement. While I've researched transforms, they primarily focus on flipping and rotating, and I am more interested in actual movement.

Here's my current 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;}
 }

This code depicts a ball being pitched from the pitcher, then hit towards left field. However, I want the hit to result in a fly ball, implying a 3D trajectory arch.

I would greatly appreciate any guidance on achieving this arched, 3D trajectory rather than a straight line movement when hit.

Best regards,

Glyn

Answer №1

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I did not anticipate % height working this way

I'm currently working on building a responsive div that contains a section and an aside. The parent div should take up 25% of the height. I want the child divs to occupy 80% of the parent container. However, I'm running into issues with the child ...

Encountering difficulties with implementing and utilizing bootstrap in Symfony 5.3 with Encore plugin

While I am currently dealing with an older version of Symfony, I decided to create a new 5.3 Symfony application from scratch. However, I am facing difficulties when trying to integrate bootstrap into it. After consulting some documentation, I proceeded to ...

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

Enabling hover effects to scroll divs only when interacted with

I am aiming to achieve two separate scrolling divs and I'm uncertain about the exact approach. Experimenting with various overflow properties has only resulted in one scrolling independently. .profile { width: 100%; display: flex; ...

Strange rendering in CSS JQuery Datatable

I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows. $(".cbD ...

Is there a way to transfer multiple functions using a single context?

Having created individual contexts for my functions, I now seek to optimize them by consolidating all functions into a single context provider. The three functions that handle cart options are: handleAddProduct handleRemoveProduct handleC ...

Step-by-step guide to implementing a user-friendly search input field using the powerful AngularJS material design framework

I am searching for an effortless method to implement a feature similar to the expandable search text field in angular-mdl. By clicking on a search button, it will expand into a text field. <!-- Expandable Textfield --> <form action="#"> < ...

Having difficulty aligning block element in the center horizontally

I am struggling with centering elements for a list of upcoming blog posts. The Postlist component is integrated into my App.js file. Although I successfully centered the navigation bar following the method described here in the Horizontally section and spe ...

Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout. <style> div { float: left; } .pro { width : 100px; color : blue; } </style> <span> <div class="pro">Long property name : </div> <div>value&l ...

What is the best method for gathering information from multiple input fields?

I'm currently working on developing a Polymer application that includes a search button with multiple input boxes. I want the search operation to consider all the inputs from these boxes when performing a search. Here is an image depicting the scenar ...

Adjust the styling of CSS classes within an ExtJS application

I've been trying to customize the appearance of my calendar panel using extjs. In my EHR application, I have implemented the extjs calendarpanel and datepicker similar to the setup showcased in this link: When a date is selected from the datepicker a ...

Improving the efficiency of CSS animations

Is it possible to improve the performance of CSS animation by preventing it from running when the animated object is not visible on the viewport? Thank you! ...

Tips for segmenting text into pages according to the dimensions of the viewport and the font style

Here's a puzzle for you. I have a horizontal slider that loads pages via Ajax, with pre-loading features to maintain smooth performance. Similar to Facebook Billboarding but with a slight twist. By determining the viewport size, I calculate boxSizeX a ...

Unable to include an additional parameter within a JavaScript function

I'm having trouble adding a parameter to the Openpopup() function - every time I try, I get an error. Can someone help me out with this? Thanks in advance. return "<a onclick='return Openpopup()' class='btn btn-info btn-lg clickBtn& ...

Tips for including a personalized CSS class in the datepicker control

Is there a method to incorporate a personalized css class title into the daterangepicker ? I want to utilize my custom styles based on my class title. For example, $('.dpick').daterangepicker( { customClass: 'my-css', // The class name ...

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

What is the best way to automatically assign a class attribute to all form widgets in Django?

Whenever I create a form using Django, I want the input tag to automatically include a specific CSS class (form-control). Currently, I have to manually add lines of code in my forms.py file for each field like this: class InsertItem(forms.ModelForm): ...

The background isn't appearing, leaving all divs exposed

I have attempted to encapsulate everything with <div class="bg-wrapper">, but I am encountering issues with making it cover and display the background across all the elements within the wrapper. .bg-wrapper { background-image: url('img/b ...

Repositioning a variable number of divs as the cursor hovers over the target area

Can anyone show me how to generate div elements in a loop using jQuery and change their position with the "mouseover" function? I've tried some code, but the positioning isn't changing correctly. Any suggestions on what needs fixing? var r, g, ...

Concealing the Footer on Mobile Websites in Muse UI When the Keyboard Appears

In this project, I am using vue.js along with muse.ui and only incorporating JavaScript and CSS without the jQuery library. Currently, the footer position always ends up on top of the keyboard whenever an input field is focused. Is there a way to ensure th ...