3D Animation for All Browsers

I'm currently working on creating a small browser-based game and I've been experimenting with animations to get the desired effect.

So far, the animation works well in Opera and Edge, although there is a slight cropping issue in Edge. Unfortunately, as expected, Internet Explorer is not cooperating.

The example doesn't display the function perfectly, even though it usually functions correctly in my preferred browser, Opera.

The goal is for the card to flip from its absolute position, expand to 90% height, and move to the center of the screen. Since there will be multiple cards with absolute positions, an ideal scenario would involve only one animation to move them to the center.

Thank you!

Link to JSFiddle
javascriptjqueryhtmlcss

Answer №1

It's uncertain if this aligns with what you were aiming to achieve - I incorporated the use of `transform-origin` and utilized `translate3D` to assist in positioning the `card` at the center.

$( document ).ready(function() {
$(document).on("click", ".card", function() {
$(this).addClass("flipover");
$(this).removeClass('hover');
});
});
html, body {
    perspective: 1000px;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.card
{
    position: absolute;
    width: 10vh;
    height: 10vh;
    border-radius: 50%;

    perspective: 1000px;

    transform-style: preserve-3d;
    transform-origin:center;

    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.cardfront,
.cardback {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;
    border-radius: 50%;
    
    transform-origin:center;
}

.cardfront {
    transform: rotateY(0deg);
    background: red;
}

.cardback {
    transform: rotateY(180deg);
    background: blue;
}


.hover:hover {
    transform: rotate3d(1, 1, 0, 45deg);
    transition: all 0.3s ease-in-out 0s;
}

.flipover {
    position: absolute !important;
    height: 90vh;
    width: 90vh;

    top: 50%;
    left: 50%;

    transform: rotateY(180deg) translate3D(-35%,-45%,0);

    margin-left: -45vh;
    margin-top: -45vh;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}


.pos1r {
    top: 50%;
    margin-top: -5vh;
    left: 50vh;
}


.pos2r {
    top: 35vh;
    left: 35vh;
}

.pos3r {
    top: 55vh;
    left: 35vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="card pos1r hover">
<div class="cardfront"></div>
<div class="cardback"></div>
</div>

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

Exclude the HTML attribute prior to displaying

Is there a way to prevent the src attribute from being used for each img tag until after a certain action is completed? I am trying to modify how images are fetched. Here's what I tried: $('img').each(function() { var elem = $(this); ...

javascriptjqueryhtml

Guide to sending client-to-client notifications in Angular/Ionic with Firebase Cloud Messaging

I am looking to implement client-client push notifications (not server-to-client). My goal is to send a notification when one user messages another. Is this feasible? How can I achieve this using the structure in the Firebase real-time database? Here is a ...

javascriptangularfirebaseionic-frameworkpush-notification

Are there any methods available to ensure that images maintain consistent quality on an HTML webpage without being stretched?

Within a card-group container, I am utilizing pre-built components from Bootstrap. The 'products' variable holds an array of JSON objects representing products for an online shopping store. <div class="card-group"> <% p ...

htmlcssnode.jsbootstrap-5

Issue with Google Maps iFrame not loading when utilizing JavaScript variables in the "src" attribute

Currently, I am facing an issue with utilizing JavaScript variables containing GPS latitude and longitude values in the "src" attribute of an iFrame in an HTML file for displaying image EXIF data on a Google Maps iFrame. When I hardcode specific latitude ...

javascripthtmlgoogle-mapsiframe

The ace.edit function is unable to locate the #javascript-editor div within the mat-tab

Having trouble integrating an ace editor with Angular material Error: ace.edit cannot locate the div #javascript-editor You can view my code on StackBlitz (check console for errors) app.component.html <mat-tab-group> <mat-tab label="Edito ...

javascriptangularangular-materialangular6ace-editor

Refresh the screen after 10 seconds

Apologies if I'm not explaining this well in advance. I am looking to create a dynamic webpage using JavaScript that automatically updates every 10 seconds. Does anyone have an example code snippet for this? **Specifically, allow ...

javascriptnode.jsexpressejs

JavaScript - Error: The '}' token was unexpected

Every time I attempt to move <div id="test">this should go down</div> downwards using: <div onclick="(".test").slideDown(800);">close it</div> I encounter an error whenever I click 'close it' SyntaxError: Unexpected to ...

javascript

The Google Map is not showing all the details

Our app is developed using ReactJS on Rails API, with a Google map integrated. However, when visiting this link and clicking "Map View", some grey space appears under the Google Map. An example image can be found here: example We are having trouble findi ...

javascriptcssreactjsgoogle-maps

When the browser window is minimized, the @media CSS will wrap to the bottom line

When the browser has a standard resolution, the layout looks like this: https://i.sstatic.net/tNR6X.png However, on smaller screens, it appears like this: https://i.sstatic.net/U3RnZ.png Is there a way to adjust the positioning of these blocks using @m ...

htmlcss

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

c#javascriptasp.net

Multiple file formats supported by Uploadify

I am trying to find a solution for having various file types in the jQuery plugin Uploadify. Consider this scenario: You want to open a file with a program of your choice. Starting with a default OS dialog, you can select different file types from a dropd ...

javascriptjquerycustomizationuploadify

Tips for utilizing node.io for HTML parsing with node.js?

Struggling to utilize node.io with node.js for parsing an HTML page stored as a string in a variable. Encountering difficulties passing the HTML string as an argument to my node.io job. Snippet from my node file nodeiotest.js: var nodeIOJob = requi ...

javascriptnode.jsweb-scrapingnpmnode.io

Angular is using the previous parameter value upon clicking the button

I'm currently working on implementing a button that, when clicked, triggers a function sending a parameter to my server. Here is what I have so far: <table class="table table-hover"> <thead> <tr> <th>Id</th& ...

javascriptangularjsweb

Display Binary Image in HTML Table using Server-side Code

I am currently working on creating a table that will retrieve binary image data from a database and display it in an HTML table. Here is the markup I have used: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml1 ...

c#htmlasp.net

Display HTML containing a <script> tag within a REACT component

Looking to embed the following HTML code within a React component: <form action="/process-payment" method="POST"> <script src="https://www.example.com/payment-script.js" data-preference-id="$$id$$"> </script> </form> I ...

javascripthtmlreactjs

Utilizing jQuery and PHP to Refine Database Search Results

I am a novice currently embarking on my journey to create my first website, integrated with a database system which is also new territory for me. Struggling to decide between jQuery and PHP for a specific task related to data handling, I seek guidance from ...

phpjquerymysqldatabasejson

Is the state mutated when using the .map() function to update it?

I am new to working with React and I am still struggling to understand state mutation. After reading multiple posts on this topic, I am finding it difficult to grasp the concept of state mutation. So, I have decided to seek clarification on this matter. ...

javascriptreactjs

Encountering an error when trying to access a property of an undefined MVC model in a

Embarked on a journey to learn web service development, only to encounter a roadblock. I'm struggling to figure out how to utilize ExpressJS Router() to pass POST data to the controller files. Upon inspecting the request redirected from product.route. ...

javascriptnode.jsexpress

Add the word "String" in front of the moment timestamp

In my project, I have used React along with Material UI to show the message Running check... when the clicked state is set to true. If it's not true, then I am displaying a timestamp by utilizing the react-moment library. <Typography gutterBottom ...

javascriptreactjsmaterial-uimomentjs

Having trouble with my React App compiling media files

I'm currently working with create-react-app and using a Data.js file where I define objects with properties that are spread as props in a tag. However, when I run npm start or deploy my application, the image doesn't show up. It seems like the co ...

javascriptreactjsimagewebpackcreate-react-app