Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers.

Here is the code I am using:

.flipcard {
  position: relative;
  width: 220px;
  height: 220px;
  perspective: 500px;
  margin: auto;
  text-align: center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
  -webkit-transform:transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
    -webkit-transform:transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
  transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
   -webkit-transform:transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
   -webkit-transform:transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
  transform: rotateY(-180deg);
   -webkit-transform:transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  border: 30px solid rgba(255, 255, 255, 0.5);
  backface-visibility: hidden;
   -webkit-transform:backface-visibility: hidden; /* Chrome, Safari, Opera */
}


.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
    margin-top: -18px;
}


.flipcard p{font-size:14px;}
.text_div > h1 {
    color: #fff;
    height: 80px;
    padding: 20% 5%;
    width: 90%;
    font-size:23px;
    text-transform: uppercase;
    line-height:60px;
}

.back > a {
    background:#EF6A36;
    color: #fff;
    float: left;
    font-family: helvetica_neuebold;
    font-size: 24px;
    font-weight: normal;
    height: 42px;
    list-style: outside none none;
    padding: 60px 0;
    text-align: center;
    text-decoration: none;
    width: 160px;
    font-family: "HelveticaNeueLTPro-Cn";
    margin-top:-21px;
}

HTML:-

<div class="flipcard h">
    <div class="front">
        <div class="text_div">
            <img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
            <h1>Brand Blazing</h1>
            <!--<p>Your truth . Your story. - Your rand</p> -->
        </div>
    </div>
    <div class="back">
        <img   class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
        <a href="<?php echo site_url(); ?>/brand">YOUR TRUTH</a>
    </div>
</div>

The flipping effect works only on Mozilla and Chrome. I have tried searching on Google for solutions but with no luck. Any suggestions or alternatives would be greatly appreciated by anyone who can help.

javascriptjqueryhtmlcss

Answer №1

All the -webkit-transform declarations are incorrect. They appear in this format:

-webkit-transform:transform: XXXXXX;

when they should be like this:

-webkit-transform: XXXXXX;

Furthermore, 

-webkit-transform:backface-visibility: hidden;

should actually be:

-webkit-backface-visibility: hidden;

 

.flipcard {
  position: relative;
  width:220px;
  height: 220px;
  perspective: 500px;
  margin:auto;
  text-align:center;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg); /* Chrome, Safari, Opera */
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg); /* Chrome, Safari, Opera */
}
.flipcard.v .back{
  transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg); /* Chrome, Safari, Opera */
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateY(0deg);
   -webkit-transform: rotateY(0deg); /* Chrome, Safari, Opera */
}
.flipcard.h .back{
  transform: rotateY(-180deg);
   -webkit-transform: rotateY(-180deg); /* Chrome, Safari, Opera */
}
.flipcard .front, .flipcard .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  border:30px solid rgba(255, 255, 255, 0.5);
  backface-visibility: hidden;
   -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
}


.text_div{ background:#EF6A36; width:160px; height:160px; margin:0px; padding:0px;}
.text_div > img {
    margin-top: -18px;
}


.flipcard p{font-size:14px;}
.text_div > h1 {
    color: #fff;
    height: 80px;
    padding: 20% 5%;
    width: 90%;
    font-size:23px;
    text-transform:uppercase;
    line-height:60px;
}

.back > a {
    background:#EF6A36;
    color: #fff;
    float: left;
    font-family: helvetica_neuebold;
    font-size: 24px;
    font-weight: normal;
    height: 42px;
    list-style: outside none none;
    padding: 60px 0;
    text-align: center;
    text-decoration: none;
    width: 160px;
    font-family: "HelveticaNeueLTPro-Cn";
    margin-top:-21px;
}
<div class="flipcard h">
    <div class="front">
      <div class="text_div">
      <img src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
      <h1>Brand Blazing</h1>
      <!--<p>Your truth . Your story. - Your rand</p> -->
      </div>
    </div>
    <div class="back">
    <img   class="icon_margin" class="icon_margin" src="<?php echo get_template_directory_uri(); ?>/images/heart.png">
     <a href="<?php echo site_url(); ?>/brand">YOUR TRUTH</a>
    </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

Transforming an image into a CSS-powered website menu button: Step-by-step guide

I am currently using images as button backgrounds, and I have programmed them to change when the button is clicked to give the impression that it is being pressed. However, I am looking to enhance the responsiveness of the page, so that the images also cha ...

css

Troubles arise when hovering over and connecting endpoints in jsPlumb

I'm currently facing two challenges with my project. Follow this link for more details. 1) The hover effect is working perfectly on the endpoints, but I can't seem to change the colors of my connector when hovering over it. Any suggestions? (Ref ...

javascriptjsplumb

What is the best way to transform a string into React components that can be displayed on the screen?

Stored in my database are strings that contain partial HTML content, as shown below: “Intro<br /><br />Paragraph 1<br /><br />Paragraph 2” If I want to display this string within a new <p> element, what is a straightforwa ...

javascriptreactjs

What are the best practices for handling dynamic content internationalization in Angular?

According to Angular.io, the i18n tag is used to mark translatable content. It should be placed on every element tag that requires translation of fixed text. Now, what if we have an element with dynamic content? For example, consider a table displaying a ...

javascriptangulartypescriptinternationalizationangular-i18n

"Enhance Your Design: Creative CSS Animation Effects for Underlined

I've been experimenting with incorporating animation into material-UI, specifically making the underline move from left to right for a tab. Here's the code I've come up with: const useStyles = makeStyles({ link: { padding: "1rem&quo ...

htmlcssreactjsmaterial-ui

I am facing errors while running npm run build in my Vue CLI project, however, npm run dev is running smoothly without

I am encountering an issue when running npm run build as it generates a series of errors, whereas npm run dev runs smoothly without any errors. I have attempted to resolve this by modifying the public path in webpack.config.js to ./dist, but unfortunately ...

javascriptvue.jswebpack

Is it feasible to generate a realistic arrow using CSS and then rotate it?

Can a fully functional arrow be created using CSS alone? Here is the method I used to create just the arrowhead: http://jsfiddle.net/2fsoz6ye/ #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10p ...

css

Using Jquery toggle to keep divs always open or automatically open them at the start

After implementing the script below, I have successfully created a toggle effect for opening and closing divs. <script type="text/javascript" src="/mainmenu/js/jquery.min.4.1.2.js"></script> <script type="text/javascript"> jQuery(documen ...

togglejquery

Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful. CSS /* Styling for Content Area */ .content div { width ...

htmlcss

The POST method functions properly in the local environment, however, it encounters a 405 (Method Not Allowed) error in the

After testing my code locally and encountering no issues, I uploaded it to Vercel only to run into the error 405 (Method Not Allowed) during the POST method. Despite checking everything thoroughly, I'm unable to find a solution on my own. Your assista ...

javascriptpostnext.jsfetch-apicloudinary

Issues with screen scrolling becoming stuck in React and Material UI

Currently facing an unusual issue where scrolling on my mobile website becomes sticky, with intermittent responsiveness to touch. Struggling to identify the root cause as there are no console errors detected. Provided below is a snippet of code for a subse ...

htmlcssreactjsmaterial-ui

What is the best way to incorporate an npm module in a django-admin widget without the need to install node?

Background I am working on a Django app and need to create an admin widget. The widget will display text in a unique terminal-style format to show forwarded logs from an analytics process managed by Django (using the django-twined extension). To achieve ...

javascriptdjangonpmwidget

Is it possible to use a link's URL as the action for a modal form submission?

I am writing a Rails application that requires users to store credential information in the database... ...

javascriptjqueryruby-on-rails

How can a loading bar be shown while a PHP page is loading?

I currently have an HTML form that directs to a PHP file upon submission. The PHP file takes some time to load due to background processes running, so I am interested in implementing a progress bar or alert to indicate when the file is fully loaded. Does ...

phpjavascripthtml

Pass an array of files from a Jquery ajax request to a controller action

I am facing an issue where I can successfully pass a single file as System.Web.HttpPostedFileBase, but when attempting to pass an array of files, the controller's action receives null. I have attempted sending an array of files. HTML: <i ...

c#jqueryajaxasp.net-mvchttppostedfilebase

Using identical content in various template slots

Is it possible in vuejs to assign the same content to multiple slots without repeating it? For example: <base-layout> <template slot="option"> <span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode ...

javascriptvue.jsvue-multiselect

Avoid filling the container with an excessive amount of grids while maintaining the correct aspect ratio

I encountered a situation where I needed to dynamically create a grid with square grids of dimensions MxN. Below is the code snippet for achieving this: rerender = (event) => { const height = document.getElementById("y-input").value; const width ...

javascripthtmlcss

The thickness of an SVG line increases as it is rotated

I am working with multiple straight lines and have specified the stroke-width as 4. However, when I attempt to rotate them, the lines appear thicker than expected. Additionally, setting a negative value, such as <path d="M0 -10 20 0" stroke-width="4" st ...

htmlcsssvg

What is the process for converting inline SVG images on the server?

Looking to use inline SVG as a background-image for another element? Check out this example that currently only works in Chrome. If you need an alternative method, take a look at the simpler inline SVG from the RaphaelJS demo here. <svg height="480" ve ...

c#csssvgraphaelbackground-image

Guide on sending a JSON object in an Ajax call within a Django environment

My objective is to send a dictionary as a Json in an Ajax request using the code snippet below: Views.py from rest_framework.response import Response class ChartData8(APIView): def tickets_per_day_results(request): if request.method == "POST ...

jqueryjsonajaxdjangopython-3.x