I am trying to implement a flip animation from the following website and I got it to work without hover effect and with a button to toggle the transition. See this Fiddle
A given code for IE worked good on hover, but by using the button the 2nd button is shown in the right top corner with the text mirrored. Can someone advice me how to make it show normal in the left top corner as in other browsers?This is the piece of css just for IE:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when hovered */
.flip-container.hover .back {
transform: rotateY(0deg);
}
.flip-container.hover .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 100%;
height: 500px;
}
/* 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);
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
}
IE has known issues with the transform property. For your sample, on the IE-only styles remove the transform on hover (.hover) from the parent div. See fiddle.
.flip-container.hover .flipper {
transform: none;
}
Related
I am trying to make a card flip and show its backside. It works in all other browsers but not in Internet Explorer 11.
I've tried adding -ms- prefaces, but that didn't help. The problem seems to be that IE does not support the css attribute transform-style: preserve-3d.
Here is a jsfiddle: https://jsfiddle.net/gbkq94hr/
HTML
<body>
<article>
<div id="card0" class="card">
<figure class="front">
</figure>
<figure class="back">
</figure>
</div>
</article>
</body>
JS
$(document).ready(function () {
var flipped = false;
var card = $("#card0");
card.click(function() { flipFunction();});
function flipFunction() {
if (flipped) {
flipped = false;
card.removeClass('flip');
} else {
card.addClass('flip');
flipped = true;
}
};
});
CSS
html {
height: 100%;
}
.flip {
transform: rotateY(180deg);
}
.card {
float:left;
width: 110px;
height: 139px;
cursor: pointer;
transform-style: preserve-3d;
transition: transform 1s;
position: relative;
}
figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-ms-backface-visibility:hidden;
}
.back {
background-color: blue;
transform: rotateY(-180deg);
}
.front {
z-index: 2;
background-color: red;
transform:rotateY(0deg);
}
article {
height: 114px;
width: 114px;
perspective: 1000;
}
EDIT:
As suggested in the comments, I tried following David Walshes instructions, but still couldn't get it to work. https://jsfiddle.net/w9o2chmn/2/
Hi I changed the jQuery code to perform card flip on click. Kindly check https://jsfiddle.net/w9o2chmn/6/
HTML
I added class flip-container to article tag
<article class="flip-container">
<div id="card0" class="card">
<figure class="front">
front
</figure>
<figure class="back">
back
</figure>
</div>
</article>
CSS
I have removed the CSS :hover code and placed it in jQuery click
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
color:#fff;
}
/* UPDATED! flip the pane when hovered */
/*.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}*/
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.card {
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);
background:red;
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
background:blue;
}
/*
jQuery
$(document).ready(function() {
var flipped=false;
$('.flip-container').on('click', function(){
if(!flipped){
$('.back').css('transform','rotateY(0deg)');
$('.front').css('transform','rotateY(180deg)');
flipped=true;
console.log('true part :'+flipped);
}
else{
$('.back').css('transform','rotateY(180deg)');
$('.front').css('transform','rotateY(0deg)');
flipped=false;
console.log('else part :'+flipped);
}
});
});
Kindly let me know if its working for you...
PS: I tested this on IE11 and its working for me
Not sure why the second animation is delaying so long as I have used this method in my own code exactly the same. Maybe someone can clean this up.
Basically wanting to add a slight delay to change the z-index so it appears, as the animation is on it's edge (50% through animation), the z-index changes and allows it to have the correct card on top.
$(document).ready(function() {
$('.flip-container').on('click', function(){
if(!$(".front").hasClass("front_flip")) {
$(".front").delay(200).queue(function(){
$(this).addClass("flip_z_index").dequeue();
});
$('.front').addClass('front_flip');
$('.back').removeClass('back_flip');
} else {
$(".front").delay(200).queue(function(){
$(this).removeClass("flip_z_index").dequeue();
});
$('.front').removeClass('front_flip');
$('.back').addClass('back_flip');
}
});
});
.flip-container {
perspective: 1000;
color:#fff;
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
.card {
transform-style: preserve-3d;
}
.front, .back {
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 3;
background:red;
}
.back {
z-index:2;
background:blue;
}
.front_flip {
transform: rotateY(-180deg);
}
.back_flip {
transform: rotateY(180deg);
}
.flip_z_index {
z-index:1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="flip-container">
<div id="card0" class="card">
<div class="front">
front
</div>
<div class="back back_flip">
back
</div>
</div>
</article>
Hi i need to make flipping cards effect in different browsers but it correctly works only in chrome and opera...in different browsers it doesn't change image or change image but doesn't flipp... can you help me?? this is my CSS code:
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 400px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.4s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
textarea {
resize: none;
}
and this is my Html code:
<div id="sekcia">
<a href="http://<?echo $_SERVER['SERVER_NAME'];?>/sk/hudba"> <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba.png"><!-- front content -->
</div>
<div class="back">
<img src="http://<?echo $_SERVER['SERVER_NAME'];?>/images/titulna/hudba1.png"><!-- back content -->
</div>
</div>
</div></a>
</div>
One thing I have different than your code is:
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
I am building a Single Page Application and I am using position absolute on my views (pages) in order to achieve page transitions while I navigate to different pages. I am using css animations and the effect I am after is one page to slide out to the right and at the same time the next page to slide in from the left.
This works fine as it is, but the problem is that most mobile browsers render the absolute positioned elements as a different layout and this has a negative effect on performance.
I wonder if there is an alternative to absolute positioning in order to achieve the effect I described above. I have tried to use display: flex and float: left, but could not achieve the same effect.
Check a very basic example of what I am doing:
#-webkit-keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); }
}
#keyframes moveFromLeft {
from { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
#-webkit-keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); }
}
#keyframes moveToRight {
from { }
to { -webkit-transform: translateX(100%); transform: translateX(100%); }
}
.moveFromLeft {
-webkit-animation: moveFromLeft .7s ease both;
animation: moveFromLeft .7s ease both;
}
.moveToRight {
-webkit-animation: moveToRight .7s ease both;
animation: moveToRight .7s ease both;
}
html,
body,
.page-container {
height: 100%;
position: relative;
width: 100%;
}
.page {
height: 400px;
color: #FFF;
position: absolute;
left: -100%;
top: 0;
width: 100%;
display: none;
}
.page.active {
display: block;
left: 0;
}
.page1 {
background: #000;
}
.page2 {
background: #0F0;
}
Fiddle
I love the css flipcard transformation they did at premium.wpmudev.org/blog/how-to-create-a-wordpress-post-list-wonderwall-the-card-flipper/ (concept from queness). So I adapted it on my site (it looks great), but I really have trouble adapting it for cross-browser-compatibility. (IE and Opera are not displaying it right according to browserstack).
Can anybody help me tweak the code that it is replaced on browsers where it cannot run and runs on all browsers that support 3D CSS transformations? That would be a great help!
The guys at brainstormforce have done it quite well in their flipcard plugin. But I can´t spot the solution for my implementation...
You find my code in a jsfiddle - slightly cleaned, just to see the function working: http://jsfiddle.net/X49EK/
HTML: in jsfiddle
The CSS:
.thumb {
/* display:block; - to be able to use display:hidden in parent for responsiveness */
position:relative;
margin-bottom:20px;
margin-right:20px;
float:left;
width:200px;
height:200px;
}
.thumb-wrapper {
display:block;
width:100%;
height:100%;
}
/* Front */
.thumb .thumb-front {
width:100%;
height:100%;
position:absolute;
display:block;
background:#ff3030;
color:#ffffff;
border-color:#ffffff;
padding-top:50px;
}
/* Back */
.thumb .thumb-detail {
display:block;
width:100%;
height:100%;
position:absolut;
background:#ffffff;
left:0;
top:0;
border-width:1px; !important;
border-color:#ff6600; !important;
border-style:solid;
padding:15px;
}
/* Back Header */
.thumb .thumb-detail-header {
font-size: 16px;!important;
margin-bottom:5px;
text-align:left;
}
/* Back Text */
.thumb .thumb-detail, .thumb .thumb-detail p {
font-size: 13px;!important;
color: #595959;!important;
line-height: 1.4em;!important;
text-align:justify;
}
/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}
.thumb.scroll .thumb-detail {
bottom:-400px;
}
/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}
.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -moz-transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.thumb.flip .thumb-front,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.thumb.flip .flipIt {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
The Javascript (for cross-browser compatibility, uses Modernizr):
$(function () {
if ($('html').hasClass('csstransforms3d')) {
$('.thumb').removeClass('scroll').addClass('flip');
$('.thumb.flip').hover(
function () {
$(this).find('.thumb-wrapper').addClass('flipIt');
},
function () {
$(this).find('.thumb-wrapper').removeClass('flipIt');
}
);
} else {
$('.thumb').hover(
function () {
$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
},
function () {
$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');
}
);
}
});
DEMO HERE
The backface-visibility property relates to 3D transforms.
Firefox 10+ and IE 10+ support backface-visibility with no prefix. Opera (post Blink, 15+), Chrome, Safari, iOS, and Android all need -webkit-backface-visibility.
Values
visible (default) - will always be visible even when not facing the screen.
hidden - not visible when not facing the screen.
inherit - gets its value from the its parent element.
initial - sets the property to its default, which is visible.
For more information Flip card effect for non-webkit browsers & CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround
Here's my website: http://adamshort2.hostoi.com/index.html
As you can see when you hover over the nav links it brings up a "ribbon" style white box around the list element. What I'd like is for that to slide down from the top (animated) instead of just appearing. If possible just stick to CSS but I don't mind Javascript/Jquery if needed.
This can be done with pure CSS. You cannot do it with the <a> alone because you need the text to stay where it is while the background animates. Changing background-position is possible, but I chose to use another element (specifically a pseudo element).
#nav a {
/* required to keep absolute background on top */
z-index: 1;
/* required to keep text on top of absolute bg */
position: relative;
/* not mandatory; makes it look better when animating out
because during that time it will be white on white */
transition: color 1s;
}
#nav li a:before {
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
/* element will not appear without this */
content: " ";
position: absolute;
/* height of the <a> so bg is off screen */
top: -175px;
left: 0;
transition: top 1s;
/* text will appear above bg */
z-index: -1;
}
#nav li a:hover {
color: red;
}
#nav li a:hover:before {
top: 0px;
}
Working demo: http://jsfiddle.net/cLsue/
The CSS "transition" property should suit your needs as a pure CSS solution, as long as you aren't concerned about compatibility with older browsers.
Here are 2 quick links that cover CSS transition.
http://www.w3schools.com/css3/css3_transitions.asp
http://www.creativebloq.com/css3/animation-with-css3-712437
If I may make a suggestion:
In this scenario it's better practice to take advantage of CSS3's translate3d because it's hardware-accelerated whereas animating using the left property is not hardware-accelerated.
There are plenty of articles that documents the increase in performance when comparing the two. Here's one for example: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css
Here's how to achieve the animation using Explosion Pill's example:
#nav a {
/* required to keep absolute background on top */
z-index: 1;
/* required to keep text on top of absolute bg */
position: relative;
/* not mandatory; makes it look better when animating out
because during that time it will be white on white */
transition: color 1s;
}
#nav li a:before {
background-color: #FFF;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: block;
width: 100%;
height: 100%;
/* element will not appear without this */
content: " ";
position: absolute;
/* height of the <a> so bg is off screen */
/* text will appear above bg */
z-index: -1;
-webkit-transform: translate3d(0, -225px, 0);
-moz-transform: translate3d(0, -225px, 0);
-ms-transform: translate3d(0, -225px, 0);
-o-transform: translate3d(0, -225px, 0);
transform: translate3d(0, -225px, 0);
-webkit-transition: -webkit-transform 1s ease;
-moz-transition: -moz-transform 1s ease;
-o-transition: -o-transform 1s ease;
transition: transform 1s ease;
/* Prevents flickering */
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#nav li a:hover {
color: red;
}
#nav li a:hover:before {
-webkit-transform: translate3d(0, -50px, 0);
-moz-transform: translate3d(0, -50px, 0);
-ms-transform: translate3d(0, -50px, 0);
-o-transform: translate3d(0, -50px, 0);
transform: translate3d(0, -50px, 0);
}