Flip animation not working in Safari - html

I have made an animated profile picture and when hovered on it flips around and shows the backside. It works perfectly in Firefox and Chrome, but not in Safari.
It does flip around, but the image changes back to the frontside but facing in opposite direction.
this is what I see 1 second after I hover on it. (This is the front-side, but flipped horizontally)
Link: http://www.ik-ben-zzp.nl/testsite/index.php
Here is the HTML CSS of the profile picture.
What is the problem here?
Thanks
Ps. Tested on Safari iPad
.roundedImage {
overflow:hidden;
width: 200px;
height:200px;
margin-left: auto;
margin-right: auto;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
}
.flip-container {
perspective: 1000;
z-index:3;
margin-bottom:200px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}
.flipper {
transition: 0.6s;
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
}
.front div, .back div {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
border: 4px solid white;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover')">
<div class="roundedImage">
<div class="flipper">
<div class="front">
<div style="background: url(Images/ProfileFront.jpg); height:200px; background-size: cover;"></div>
</div>
<div class="back">
<div style="background:url(Images/ProfileBack.jpg); height:200px; background-size:cover;"></div>
</div>
</div> <!--FLIPPER-->
</div> <!-- ROUNDED IMAGE -->
</div> <!-- FLIP CONTAINER -->

Add -webkit- prefixes to all necessary css property. You missed to 'backface-visibility'.

Remove the ontouchstart="this.classList.toggle('hover');" in all your div's in html and add below javascript. you can comment 'return false' incase you have any serverside clickable items inside the divs of 'front' or 'back to work
$('.flip-container').click(function(){
$(this).find('.flipper').addClass('hover').mouseleave(function(){
$(this).removeClass('hover');
});
return false;
});

Related

Why 'backface-visibility: hidden' does not work with text?

This is supposed to be a memory game with cards with text on them.
The cards on the front should just be white (the background-image) and at the back there is a word. But since applying the backface-visibility-hidden, it actually just shows the background image and no text.
It supposed to have text only on the back, but out of curiosity I have placed text on one card on the back and on the front, only this one shows text from the front, but after flipping it does not show the back text, but only the mirror image of the front.
I have read the IE might cause problems, but not in this case, as it does not work in any browser.
I have tried playing with preserve-3d, but nothing brings me a solution.
<section class="memory-game">
<div class="memory-card">
<p class="front">un abricot</p>
<p class="back"></p>
</div>
</section>
.memory-game {
perspective: 1000px;
}
.memory-card {
position: relative;
transform: scale(1);
transition: transform 0.4s;
}
.memory-card:active {
transform: scale(0.95);
transition: transform 0.4s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
background-image: url("image.jpg");
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
back
front
disappearing half
As you say, the solution is to add preserve-3d.
See it working in the snippet
.memory-game {
perspective: 1000px;
}
* {
transform-style: preserve-3d;
}
.memory-card {
position: relative;
transform: scale(1);
transition: transform 0.4s;
border: solid 1px black;
height: 50px;
width: 200px;
}
.memory-card:active {
transform: scale(0.95);
transition: transform 0.4s;
}
body:hover .memory-card {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
background-image: url("image.jpg");
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
<section class="memory-game">
<div class="memory-card">
<p class="front">FRONT</p>
<p class="back">BACK</p>
</div>
</section>

CSS Card Flip Does Not Work On Apple Devices

I have a website where users can make flash cards and use them. Iv'e tested the cards on all devices and web browsers and apple devices seem to give me problems. The animation works and allows the card to flip, but the content on the back of the card disappears. I won't include it because it's long, but I also have a JS function that adds "flipped" to the class "gallery-cell". You will see this in my CSS.
.gallery-cell.card {
position: relative;
-webkit-transition: 0.5s;
-moz-transition: 0.6s;
transition: transform .5s;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective:1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
word-break: break-word;
}
.card__face {
position: absolute;
height: 100%;
width: 100%;
padding: 25px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
justify-content: center;
text-align: center;
cursor: pointer;
}
.card__face--back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY( 180deg );
}
.card__face--front {
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: inherit;
-moz-perspective: inherit;
-o-perspective: inherit;
-ms-perspective: inherit;
perspective: inherit;
z-index: 2;
background-color: #fff;
}
.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card_contents {
overflow-y: auto;
margin: 0;
display: flex;
}
<div class='gallery-cell card flippable'>
<div class='card__face card__face--front'>
<div class='card_contents'>
<h3>
$question
</h3>
</div>
</div>
<div class='card__face card__face--back'>
<div class='card_contents'>
<h3>
$answer
</h3>
</div>
</div>
</div>
The reason why I reworked the CSS and HTML is b/c once adding your code to JSFiddle, it was immediately not displaying correctly.
First issue is that you need another wrapper element to hold the containers (card__face). Also perspective cannot be inherited. Unfortunately the animation would not work unless a height was supplied on the main wrapper element. min-height did not work either.
You could run some JS and determine the height on load. (see CSS3 Flip Card with Automatic Height)
<div class="gallery-cell card flippable">
<div class="wrapper">
<div class='card__face card__face--front'>
<div class='card_contents'>
<h3>
$question
</h3>
</div>
</div>
<div class='card__face card__face--back'>
<div class='card_contents'>
<h3>
$answer
</h3>
</div>
</div>
</div>
</div>
.gallery-cell {
background-color: transparent;
width: 100%;
height: 100px;
perspective: 1000px;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.gallery-cell:hover .wrapper,
.gallery-cell.flipped .wrapper {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
background-color: red;
}
.card__face--back {
background-color: #000;
color: white;
transform: rotateY(180deg);
}
.card_contents {
overflow-y: auto;
margin: 0;
display: flex;
}
I added the hover in case you wanted to test it - here's https://jsfiddle.net/rzqkpva9/

css flip animation not working in mozilla

My css flip animation is working perfectly in chrome but not working in mozilla firefox. I am wondering why even though i have provided the moz- prefix.It is working perfectly in microsoft edge even.Can you please help me? I am unable to figure out the problem.. .. . I have edited the question and added the html part as well. please have a look at it.
styles.css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
/* border: 1px solid #ccc; */
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 220px;
height: 180px;
text-align: center;
margin:auto;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
/*background: url(/web/images/movies.jpeg) 0 0 no-repeat;*/
z-index: 2;
}
#background1{
background: url(/web/images/movies.jpeg) 0 0 no-repeat;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
/* background: #f8f8f8; */
/* background: url(/web/images/paytm.png) 0 0 no-repeat; */
}
html. .. . ..
<div style="text-align:center" class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper" style="text-align:center">
<div class="front">
<img src="/web/images/gk.jpg" alt="" />
<h2 id="play" style="text-align-last: center">GENERAL KNOWLEDGE</h2>
</div>
<div class="back">
<a href="/pksGK">
<img src="/web/images/pks.png" alt="" />
<h2 id="play" style="text-align-last: center">blah</h2>
</a>
</div>
</div>
</div>

iPhone 6 CSS transition flicker issues

Having CSS transition on two absolutely positioned elements one over another causes them to interfere on iPhone 6 (maybe iOS in general). Taking a close look reveals some flickering during the transition. I've tried various z-index and 3D transform hacks, but without any success so far so I am a bit tilted atm :(
<div class="flip-container c1">
<div class="flipper">
<div class="front"><!-- front content --></div>
<div class="back"><!-- back content --></div>
</div>
</div>
<div class="flip-container c2">
<div class="flipper">
<div class="front"><!-- front content --></div>
<div class="back"><!-- back content --></div>
</div>
</div>
<button onclick="$('.c2').toggleClass('flipped')">btn1</button>
css:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
margin: 50px auto;
position: absolute;
top: 0;
border: 1px solid grey;
}
/* UPDATED! flip the pane when hovered */
.flip-container.flipped .back {
transform: rotateY(0deg);
}
.flip-container.flipped .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 320px;
height: 380px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
background: lightblue;
}
.c1 .front {
background: lightgrey;
}
.c2 .front {
background: teal;
}
link to an example:
http://codepen.io/AlphaVision/pen/avrVoj

Flipping Tiles over CSS3 with Background

I am trying to create a flip over effect where the content of the div changes, though not able to figure out why the text disappears after a few seconds.
I have added backface-visibility:hidden though no use!
HTML
<div class="tweets">
<div class="front">
This is the front
</div>
<div class="back">
Back this is
</div>
</div>
CSS
.tweets{
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 2s;
-webkit-transition: transform 2s;
transition-delay:0s;
-webkit-transition-delay:0s;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.tweets.flipped{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg');
background-size:cover;
}
.back{
transform: rotateY( 180deg );
-webkit-transform: rotateY( 180deg );
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
Can anyone help ?
I think this is what you are looking for, i have created square block of 220px(change as per your requirement), which has image you linked in question as background.
JSFiddle
CSS
.flip-container {
position:relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
}
.flip-container:hover .flipper {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-ms-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform:rotateY(180deg);
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
filter: FlipH;
-moz-filter: FlipH;
-ms-filter:"FlipH";
}
.flip-container, .front, .back {
width: 220px;
height: 220px;
}
.flipper {
-webkit-transition: 0.8s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.8s;
-ms-transform-style: preserve-3d;
-moz-transition: 0.8s;
-moz-transform-style: preserve-3d;
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
background:url('http://www.giantfreakinrobot.com/wp-content/uploads/2012/08/Mad-Max.jpg') no-repeat;
background-size:100% 100%;
color:red;
}
.front:hover {
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
}
.back {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter: FlipH;
}
.front-title {
font-size:20px;
text-align:center;
}
.back-title {
font-size:25px;
text-align:center;
}
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">
<div class="front-title">I am front Text</div>
</div>
<div class="back">
<div class="back-title">I am text behind </div>
</div>
</div>
</div>