CSS3 flip effect on hover and click causing issues

I have successfully implemented a card flip effect using CSS3.

The card is flipped using jQuery and CSS

CSS

    .flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

jQuery

<script>
$(".card").click(function () {
    var id = $(this).attr('id');
    $('#' + id).toggleClass('flipped');
});

Everything works fine but I encountered an issue when adding a hover effect like this:

.card:hover{
    -webkit-transform: rotateY( 10deg );
    -moz-transform: rotateY( 10deg );
    -o-transform: rotateY( 10deg );
    transform: rotateY( 100deg );
}

In this situation, the hover effect works correctly, but the onclick flip effect only triggers when moving the cursor away from the card!

Below is the code snippet demonstrating the effect

$(".card").click(function() {
  var id = $(this).attr('id');
  $('#' + id).toggleClass('flipped');
});
/*Card Flip*/

.card-container {
  width: 150px;
  height: 150px;
  position: relative;
  border: 1px solid #ccc;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  float: left;
  margin: 50px 50px 50px 50px;
  cursor: pointer;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}
.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 150px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flipped {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.card:hover {
  -webkit-transform: rotateY(20deg);
  -moz-transform: rotateY(20deg);
  -o-transform: rotateY(20deg);
  transform: rotateY(20deg);
}
.flipped:hover {
  -webkit-transform: rotateY(20deg);
  -moz-transform: rotateY(20deg);
  -o-transform: rotateY(20deg);
  transform: rotateY(20deg);
}
/*Card Flip*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="card-container">
  <div class="card" id="card1">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

Answer №1

It seems like the :hover for .flipped is set to rotate to 20degY, which means it's functioning correctly when hovered over.

To achieve the expected behavior of rotating to 180degY when hovered and also when the class .flipped is applied, you can combine the styles by replacing .flipped:hover with just .flipped.

$(".card").click(function() {
  var id = $(this).attr('id');
  $('#' + id).toggleClass('flipped');
});
/*Card Flip*/

.card-container {
  width: 150px;
  height: 150px;
  position: relative;
  border: 1px solid #ccc;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  float: left;
  margin: 50px 50px 50px 50px;
  cursor: pointer;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 1s;
  -moz-transition: -moz-transform 1s;
  -o-transition: -o-transform 1s;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
}
.card div {
  display: block;
  height: 100%;
  width: 100%;
  line-height: 150px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 140px;
  position: absolute;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: red;
}
.card .back {
  background: blue;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card:hover {
  -webkit-transform: rotateY(20deg);
  -moz-transform: rotateY(20deg);
  -o-transform: rotateY(20deg);
  transform: rotateY(20deg);
}
.flipped {/*combined with flipped:hover here*/
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section class="card-container">
  <div class="card" id="card1">
    <div class="front">1</div>
    <div class="back">2</div>
  </div>
</section>

Answer №2

The correct angle for flipping the card should be 200 degrees, not 20 degrees. You can see an example of this correction in action on jsFiddle using your code: http://jsfiddle.net/zbgnggkp/2/

.flipped:hover {
    -webkit-transform: rotateY(200deg);
    -moz-transform: rotateY(200deg);
    -o-transform: rotateY(200deg);
    transform: rotateY(200deg);
}

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

One way to generate div elements based on the number in an input field when a button is clicked, but ensuring it only happens once

What I am attempting to achieve is: Retrieve data from a JSON file upon button click. Display the data in separate boxes, each one different for every element of the array. For instance, if the JSON provides 3 rows of data, there should be 3 distinct box ...

Using jQuery, stop any click or touchstart events on child elements of the target element

Below is my current jQuery code: $(document).on('click touchstart', function (e) { if ( (!$(e.target).hasClass('sb')) ) { $('#features .sb .screen').animate({ top: '6.438em' }, 150); } } I want to twea ...

Tips on utilizing commas as text input within an HTML input array

Is there a way to pass a comma in an input field to the server using input arrays? The server currently receives comma-separated input values from an array of inputs, which causes it to consider any commas within the input as separators. For example: HTM ...

Assigning a value and specifying the selected attribute for an options tag

Trying to understand the challenge of setting both a value and a selected attribute on an options tag. Each one works independently, but not together. For example: <select> <option *ngFor="let item of items" selected [ngValue]="item"> ...

Unable to execute a basic opacity transition on a div element

Why isn't the opacity transitioning in Chrome? I only want it to fade in with the 'transitions' class without fading out first. Check out this code sample: http://jsfiddle.net/chovy/t37k3/9/ <div></div> <a href="#" class="s ...

Tips for adding extra spacing between icon and text field using Vuetify

The code snippet below is used for the username section: <v-text-field prepend-icon="fas fa-user" height="60px" placeholder="Username" outlined ></v-text-field> Is there a way to add space between the user ...

Automate tasks without the need for a traditional form, simply using a text box and a

I've exhausted my search efforts on Google, looking for answers to any question relating to my issue. The webpage I am attempting to submit resembles this setup: there is no form present and the objects are not organized within a form structure. While ...

Creating a webpage menu with CSS and HTML

Is there a way to make the background color for "Sub test1" change only when hovering over it, without affecting the background color of "Test1"? See the code at http://jsfiddle.net/r5YCU/22/ Any assistance on this issue would be greatly appreciated. Than ...

What criteria does jQuery's .ajax function use to identify a request as 'failed'?

Interestingly, it seems that the documentation for .ajax does not explicitly define the terms 'success' and 'fail'. While there are some basic guidelines like: Any status code in the 4xx or 5xx range triggers a .fail() callback Any s ...

Unusual behavior exhibited by JavaScript's eval() function

As part of my website design, I am developing custom Message Boxes that can display normal OK dialogs as well as Yes/No dialogs. These popups prompt the user to click either "OK" or "Yes/No", which then triggers corresponding callbacks executed using eval( ...

Leverage JQuery's Ajax Load function to load content onto a div that was previously loaded by

In my db_sample_ajax.php, there is a div element: <div class="form_header" id="form_header"> </div> I have used jQuery to load content into this div with the following code: $("#form_header").load('ajax/ajax_form_header.php', {"mem ...

CSS Begin the background repeat from a specific origin

I am trying to achieve a specific background effect starting from the line shown in the screenshot below: I attempted to implement it using the following CSS code: background : ('path/to/image') 0 650px repeat-y However, the light part of the ...

Checking for collisions among numerous elements in JS: An insightful guide

I have created 40 images with random positions, however, some of them collide in certain cases. My question is how to prevent collisions and assign new positions if they do occur? Below is my code along with comments for clarity. $( document ).ready(fun ...

The issue arising where the callback function fails to execute after making an AJAX POST request

Within my function, I have an AJAX call that I want to make reusable. When the AJAX call is successful, I need to callback a function. var ajaxPostCall = function(data , url ,callback){ // Return the $.ajax promise $.ajax({ data: data, dataType: ...

Exploring the wonders of Lightbox when dealing with content loaded via AJAX

Using Bootstrap 5 along with the Lightbox library from , I encountered an issue. The Lightbox feature functions properly on regular page loads, but fails to load on content loaded via AJAX. I attempted to resolve this by implementing the following code: ...

Is there a way to modify the title of a website upon entering the webpage and then updating it when moving to a new page?

I'm encountering an issue with changing the website title during two specific processes. Upon entering a webpage, the title is modified using the following code: <script type="text/javascript"> $(document).ready(function() { docum ...

How can I compare the current page URL with the navigation bar?

Looking to compare the URL of a current page to an element in the navigation bar using jQuery. Started by assigning the current URL to a variable: var currentPage = window.location.href; Then utilized an .each function to loop through each item in the n ...

Utilizing JQuery to parse and manipulate JSON data retrieved from PHP servers

Apologies if this is a basic question, but I've been struggling with it all day. I have managed to work with Jquery and CakePHP effectively (not sure if the latter matters in this case), and now I want to return a variable from a CakePHP function to J ...

Aligning Content in the Middle of a Bootstrap Column

Can anyone help me with centering the content of a bootstrap column vertically? I'm facing an issue when setting width: 100% and height: 100% for the overlay div. Any solutions? Here is an example image of what I am trying to achieve: Below is the ...

Determine the presence of an element using its selector and retrieve a true or false value using jQuery or JavaScript

Is there a way to determine if an object is present on the page based on its selector? This method typically works: startpageentry = $('#' + startpageid) However, it does not return anything. I require a boolean value that can be used in an if ...