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
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);
}
For some reason my music section 'flip divs' are not displaying correctly? What is causing this?
1st image-safari-screenshot: Reveals the back but not the text
2nd image-chrome-screenshot: Works beautifully
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
}
.flip-container {
margin-right:0;
padding-right: 0;
}
.flip-container, .front, .back {
width: 300px;
height: 300px;
padding: 0;
margin: 0;
}
/* flip speed goes here */
.flipper {
-webkit-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 */
-webkit-transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
}
Here's a link to the test site - lengtest.com
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 the following fiddle: http://jsfiddle.net/mauricederegt/hy2dvL1u/43/
When you open it in Chrome and click the card it will flip and move to the right. Looks OK in Chrome, but when I do this in Safari (v9) the animation kinda sucks (it has clipping etc, click faster to see the mess-up better)
Part of the CSS (please see the whole in the fiddle):
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when .flipped class applied */
.flip-container.flipped .back {
transform: rotateY(0deg);
}
.flip-container.flipped .front {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 7.1428rem;
height: 10rem;
}
/* flip speed goes here */
.flipper {
transition: 200ms;
transform-style: preserve-3d;
position: relative;
}
What am I missing? Why is the flipping animation so bad in Safari?
Kind regards,
ps. I don't use the -webkit- prefix since it shouldn't be needed anymore
try it
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* UPDATED! flip the pane when .flipped class applied */
.flip-container.flipped .back {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container.flipped .front {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 7.1428rem;
height: 10rem;
}
/* flip speed goes here */
.flipper {
-webkit-transition: 200ms;
transition: 200ms;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
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!