If I try to make an only css3 flip effect and that will work in all major browsers, I fail.
anaxshipping.com/site is the url and the flipping effect is at home page at the three top icons.
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
I tried also the perspective with px. In chrome it works. In Mozilla it doesn't. Should I paste the rest of the code?
/* entire container, keeps perspective */
.flip-container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
// width: 100%;
// height: 21em;
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
-webkit-transition:0.6s;
-moz-transition:0.6s;
-ms-transition:0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-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;
-ms-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);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
for 3D animations, use this ordering:
(for better realization i wrote it in nested form)
#world {
perspective: 1000px; //px needed
-webkit-perspective: 1000;
-moz-perspective: 1000px; //px needed
#container {
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
.elements {
transform: ... ;
-webkit-transform: ... ;
-moz-transform: ... ;
}
}
}
.flip-container, .front, .back {
-moz-transform-style: preserve-3d;
}
I have added there the preserve-3d for Mozilla and it worked.
Thank you for the feedback!
Related
I've successfully gotten two images to flip like a card when hovering over. Using transition and transform-style. It works except on mobile (iPhone; chrome and safari). What am I doing wrong? Any guidance very much appreciated.
I've reviewed previous posts on StackOverflow but what I've found did not help my situation.
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="./resources/images/green.jpg" alt="" style="width:421px;height:552px">
</div>
<div class="flip-box-back">
<img src="./resources/images/brown.jpg" alt="" style="width:421px;height:552px">
</div>
</div>
</div>
.flip-box {
background-color: transparent;
width: 421px;
height: 552px;
border: 0px;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
.flip-box-front {
transform-style: preserve-3d;
}
.flip-box-back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
transform-style: preserve-3d;
}
I expected the card to flip back and forth on mobile but it only transitions once.
Not answering the direct question, but maybe try the CSS from DavidWalsh.name (with prefixes).
/* entire container, keeps perspective */
.flip-box {
-webkit-perspective: 1000px;
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-box-inner:hover .flipper, .flip-box-inner.hover .flipper {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-box, .flip-box-front, .flip-box-back {
width: 421px;
height: 552px;
}
/* flip speed goes here */
.flip-box-inner {
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.flip-box-front, .flip-box-back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.flip-box-front {
z-index: 2;
/* for firefox 31 */
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.flip-box-back {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
I'm trying to get a CSS card flip to work on all browsers. I've gotten it to work on everything except Safari. I've used this code:
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
display: inline-block;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
backface-visibility: hidden;
}
.flip-container, .front {
width: 250px;
height: 250px;
}
.flip-container, .back {
width: 250px;
height: 250px;
}
/* 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);
}
But the front flickers in front of the back image on hover before showing the back image.
If you go to my website, I've been playing around with just the president of the company's picture until I get it right before I reformat everyone else.
http://www.logomatsdirect.com/our-team/
Any suggestions?
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
This should do the trick
You can always look up in caniuse.com for browser's supported properties:
http://caniuse.com/#search=css3%203d%20transforms
As stated there, Safari still require a prefix for the backface-visibility property.
If you are using transform property you need to add prefix in it to let it work in all browser. For safari you need to add -webkit- as a prefix like this
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
display: inline-block;
}
-webkit- is for safari similarly other prefix are for other browsers.
I have a card with something on the back, and I'm y-rotating the card +/- 180 deg:
http://jsfiddle.net/s46t6cem/1/
#back {
transform: rotateY(180deg);
}
.flipped-right {
transform: rotateY(180deg);
}
.flipped-left {
transform: rotateY(-180deg);
}
In the jsfiddle basic example, both flips work fine. However, in my application, flipping right works, but when I flip left, I can see the back as it's moving (it flickers though, which is odd), but then I can't see the back when it stops moving. I can see it if I change the original #back rotation to 181 deg.
and then
I can't figure out what's different between the fiddle and my app that might be causing this. How can I further diagnose this?
I dont know how to debug this kind of things. But maybe you need to add some x-browser propierty:
-webkit -moz -o -ms. I have used this code in other project, try it, it worked for me (not for IE)
<style>
.flip-container {
position: relative;
height: 100%;
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
-ms-perspective: 800;
perspective: 800;
padding: 0;
}
.flip {
height: 100%;
width: 100%;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.flip-container:hover .flip {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.side {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.flip .front {
height: 100%;
width: 100%;
}
.flip .back {
display: block;
height: 100%;
width: 100%;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<div class="flip-container">
<div class="flip">
<div class="side front">
a
</div>
<div class="side back">
b
</div>
</div>
</div>
Thank you #mknadler, I took background: white off of the #card and it works.
I have the following jsfiddle:
http://jsfiddle.net/wcZq7/
CSS:
.boxcontainer {
perspective: 1000;
}
/* flip the pane when hovered */
.boxcontainer.hover .boxcard {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.boxcontainer, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.boxcard {
transition: 0.6s;
-webkit-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
After clicking the flip link once, I cannot click the links on the 'back' div, why is that?
translateZ fixes this:
.back {
transform: rotateY(180deg) translateZ(200px);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
DEMO
Alright. I've done quite a bit of research, but I wasn't able to come up with anything. After possibly over-thinking the problem, here is what I'd appreciate your help with.
I would like to be able to rotate a <div> around its center so its backside becomes visible. I was able to do that with rotateY--without any problems. But when using rotateX the <div> does not rotate around its center anymore.
The CSS:
.flip-container {
font-size: 30px;
-webkit-perspective: 1000;
-moz-perspective: 1000;
margin: 0 auto;
color: black;
}
.flip-container:hover .flipper {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background: transparent;
}
.front {
z-index: 1;
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
.back {
-webkit-transform: rotateX(-180deg);
-moz-transform: rotateX(-180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
This problem is driving me up the walls. I know it's something small I overlooked; but I can't find it. Any helps or hints would be greatly appreciated. :)
Fiddle
For a vertical rotation, you need to specify transform-origin, with :
<x> : 50%
<y> : half height of the div
Updated Fiddle
.flipper {
-webkit-transform-origin: 50% 100px;
-moz-transform-origin: 50% 100px;
-o-transform-origin: 50% 100px;
-ms-transform-origin: 50% 100px;
transform-origin: 50% 100px;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
position: relative;
}