I am trying to flip the div vertically from front side to back side and then restore it .But when I hover instead of flipping it is folded into a thin strip.What is the problem?
[The horizontal flip was working fine.Problem occured when I changed it to vertical flip]
<html>
<head>
<style type="text/css">
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateX(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* 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;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
background-color:red;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color:green;
}
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container .flipper {
transform-origin: 100% 213.5px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
</style>
</head>
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
Front Side
</div>
<div class="back">
Back Side
</div>
</div>
</div>
</body>
</html>
Simply make all the rotateYs be rotateXs and make sure to add the class vertical to the container (since you have it in your CSS but not HTML)
Working demo
Changed HTML
<div class="vertical flip-container" ontouchstart="this.classList.toggle('hover');">
Updated CSS
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
position: absolute;
top: 0;
left: 0;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
/* front pane, placed above back */
.front {
z-index: 1;
background-color:red;
}
/* back, initially hidden pane */
.back {
transform: rotateX(-180deg);
background-color:green;
animation: toFront 0.3s linear normal forwards;
}
.vertical.flip-container {
position: relative;
}
.vertical.flip-container:hover .back {
animation-delay: 0.3s;
animation: toBack 0.3s linear normal forwards;
}
#keyframes toBack {
0% {z-index:0;}
100% {z-index:1;}
}
#keyframes toFront {
0% {z-index:1;}
100% {z-index:0;}
}
.vertical.flip-container .flipper {
transform-origin: 100% 240px; /* half of height */
}
.vertical.flip-container:hover .flipper {
transform: rotateX(-180deg);
}
I added full functionality using CSS3 animations as well
Related
I got this CSS Animation that flips an image to another image which is awesome after I got help from this forum on how to add a vendor prefix to get it to work in Safari. Unfortunately it still doesn't work on Iphone :(
Anyone know how to solve this?
CODE:
<body>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<img src="https://placekitten.com/600/332">
</div>
<div class="back">
<img src="https://placekitten.com/600/331">
</div>
</div>
</div>
</body>
CSS:
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container, .front, .back {
width: 600px;
height: 332px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: 1000px;
}
/* front pane, placed above back */
.front {
background: white;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: white;
}
You should review and apply vendor prefix for ALL required properties (such as perspective, transform-style, transition also).
Also you should add units to perspective property (for example: -webkit-perspective: 1000px).
Practically, to prevent code overloading by vendor prefixes use -prefix-free javascript library.
When you using -Prefix-free javascript library you don`t care about vendor prefixes.
Official site is here: http://leaverou.github.io/prefixfree/
Remove the ontouchstart="this.classList.toggle('hover');" in all your div's in html and add below javascript.
$('.flip-container').click(function(){
$(this).find('.flipper').addClass('hover').mouseleave(function(){
$(this).removeClass('hover');
});
return false;
});
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
Using David Walsh css flip effect for an image that suppose to change to another. But wondering If it can be triggered in say 3 seconds instead of mouseover? Sorry! Kind on a n00b to this. :(
Any response will be very appreciated :)
CSS Flip homepage: http://davidwalsh.name/css-flip
The Code:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
The CSS:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* 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;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
You'll want to use CSS animations instead of transitions on hover. Using animation-fill-mode: forwards the animation will only play once. You'll have to alter it if you want it to flip back over. animation-delay is used to make it wait 3 seconds.
Here's a resource for using CSS animations: MDN docs
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
.flipper {
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
#-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
#keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 0.6s;
animation-duration: 0.6s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
background: blue;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: green;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
I am trying to make an advent calendar for my website similar to THIS example.
I have the basic layout of the calendar created and when I hover over one of the "tiles" on the calendar the animation starts and the tile swings open. The animation swings the tile in the fashion as if you are opening a door towards you and it swings open to 90 degrees. However, when the animation gets to 90 degrees, the tile is reset to its original closed position.
How can I keep the door open while the user hovers over the tile and then swing the tile closed again when the user removes the cursor from the tile?
When the tile is open I also need to have an image behind it that is a clickable link to another page on my site. I have set this in a but all that is displayed is the background color of my .tile div (background-color: #000;) and not the clickable image or even my .back div.
Can anyone please help.
I have attached my current CSS and HTML that shows how the tile is created and animated.
Note: I do not need to handle touch events from mobile devices for this example.
CSS
.tile
{
background-color: #000;
color: #ffffff;
border: 1px solid #220001;
}
/* Flip the tile when hovered */
.tile:hover .flipper, .tile.hover .flipper
{
-webkit-animation: example 2s;
}
#-webkit-keyframes example
{
from
{
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
to
{
-webkit-transform: perspective(500) rotateY(-90deg);
-webkit-transform-origin: 0% 0%;
}
}
.tile, .front, .back
{
width: 120px;
height: 120px;
}
.flipper
{
position: relative;
}
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front Tile - placed above back */
.front
{
z-index: 2;
transform: rotateY(0deg);
background-color: #760805;
}
/* Back - initially hidden Tile */
.back
{
background-color: #000;
}
HTML
<table>
<tr>
<td>
<div class="tile">
<div class="flipper">
<div class="front">
<!-- front content -->
<p>December 1</p>
</div>
<div class="back">
<!-- back content -->
<a href="http://www.google.com">
<img src="images/myImage1.jpg">
</a>
</div>
</div>
</div>
</td>
</tr>
</table>
Instead of using keyframes use transition
(Note: I've also added backface-visibility: true; and increased the rotation to -95deg to make the effect more similar to your example)
.tile .front {
transition: all 1.5s ease-in-out;
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
backface-visibility: visible;
}
.tile:hover .front, .tile.hover .front
{
-webkit-transform: perspective(500) rotateY(-95deg);
-webkit-transform-origin: 0% 0%;
}
Demo
.tile
{
background-color: #000;
color: #ffffff;
border: 1px solid #220001;
}
.tile .front {
transition: all 1.5s ease-in-out;
-webkit-transform: perspective(500) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
backface-visibility: visible;
}
/* Flip the tile when hovered */
.tile:hover .front, .tile.hover .front
{
-webkit-transform: perspective(500) rotateY(-95deg);
-webkit-transform-origin: 0% 0%;
}
.tile, .front, .back
{
width: 120px;
height: 120px;
}
.flipper
{
position: relative;
}
.front, .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* Front Tile - placed above back */
.front
{
z-index: 2;
transform: rotateY(0deg);
background-color: #760805;
}
/* Back - initially hidden Tile */
.back
{
background-color: #000;
}
<table>
<tr>
<td>
<div class="tile">
<div class="flipper">
<div class="front">
<!-- front content -->
<p>December 1</p>
</div>
<div class="back">
<!-- back content -->
<a href="http://www.google.com">
<img src="http://placehold.it/120x120">
</a>
</div>
</div>
</div>
</td>
</tr>
</table>
I am trying to implement a feature where I need to have two trees, one next to the other, looking like mirrors. Please, see the image:
The point is I found the way to flip it horizontally but text is also inverted. What I cannot do is invert the tree letting the text as it is.
Here is what I have done: http://jsfiddle.net/lontivero/R24mA/
Basically, the following class is applied to the html body:
.flip-horizontal {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
The HTML code:
<body class="flip-horizontal"></body>
And the JS:
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
height: 200,
width: 400,
// more and more code. SO forces me to paste js code ;(
renderTo: Ext.getBody()
});
Your fiddle already had the start of the answer - to do a second flip on the text. There was an extra , preventing the second rule from being parsed.
I've updated the fiddle to include the heading elements, and set them to inline-block because inline elements can't be transformed.
.flip-horizontal, .x-grid-cell-inner, .x-column-header-text, .x-panel-header-text {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.x-column-header-text, .x-panel-header-text {
display: inline-block;
}
I tried this, and it works great!
HTML code:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- Front content -->
</div>
<div class="back">
<!-- Back content -->
</div>
</div>
</div>
The CSS:
/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* 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;
position: absolute;
top: 0;
left: 0;
}
/* Front pane, placed above back */
.front {
z-index: 2;
/* For Firefox 31 */
transform: rotateY(0deg);
}
/* Back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
I use this inside a Bootstrap col-sm-* and works great too:
<div class="col-sm-4 flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="content-box flipper">
<div class="content-box-front">
<span class="glyphicon glyphicon-envelope content-box-icon"></span>
<h4>Share your emotions</h4>
</div>
<div class="content-box-back">
<p>Share emotions with friends, family and teammates.</p>
<button>Read more</button>
</div>
</div>
</div>
the CSS:
.content-box {
position: relative;
text-align: center;
height: 105px;
width: 100%;
}
.content-box-icon {
font-size: 30px;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
text-align: center;
display: block;
margin: 5px auto 15px auto;
color: #fff;
float: none;
background:#25acfd
}
.content-box-front
{
z-index: 2;
/* For Firefox 31 */
transform: rotateY(0deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
.content-box-back {
transform: rotateY(180deg);
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 105px;
}
/* Entire container, keeps perspective */
/* Flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
/* Flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
Here is the example:
/* Entire text flipped around */
div {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
}