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
Related
I am hoping some of you might have some ideas regarding using Bulma Tiles (https://bulma.io/documentation/layout/tiles/). I am partially successful with getting the flip functionality to work using the input checkbox, but the content inside the tile is flipping, not the entire tile.
/* ==========================================
reference --> https://codepen.io/amazingrando/pen/yjbAh
========================================== */
.tile input[type="checkbox"] {
/*Hiding the checkbox. We never want to see it.*/
position: absolute;
left: -9999em;
}
.flip-tile {
cursor: pointer;
/*Animation elements*/
display: block;
perspective: 600px;
position: relative;
transition: all 0.1s;
&:hover {
transform: scale(1.02, 1.02);
}
}
.flip-tile-front, .flip-tile-back{
//position: absolute; top: 0; left: 0;
//width: inherit; height: inherit; /*Size of the card is set by the container*/
backface-visibility: hidden; /*Makes a card invisible from behind.*/
transform-style: preserve-3d;
transition: all 0.4s ease-in-out;
}
.flip-tile-front {
/*Default rotation values*/
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-back {
background: MediumPurple;
visibility: hidden;
/*Default rotation value*/
transform: rotateY(-180deg);
}
/*When the container is clicked the checkbox is marked as checked. This activates the CSS below. */
.tile input[type="checkbox"]:checked {
~ .flip-tile {
//animation: lift 0.4s linear;
.flip-tile-back {
visibility: visible;
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-front {
transform: rotateY(180deg);
}
}
}
https://codepen.io/lostcook/pen/QWyvBey
Any ideas or help would greatly be appreciated.
Thanks
I'm trying to make a flip circle on my jgraph js project. Everything working fine in chrome, edge, firefox. But when I try to test in Safari and chrome 73, the element does not display at all.
I'm using "backface-visibility" and "transform" in order to make the flip circle. I guess something is wrong with these CSS attribute in chrome 73 because if I remove these attributes then the element can display well (but no effect). In safari 10.1, the element can not display even when I already removed the css attribute. It only displays the element if I change the position from absolute to fixed (you can read my css code below).
.counter-card {
margin-left: 12%;
width: 100%;
height: 100%;
cursor: pointer;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: center right;
-webkit-transition:transform 1s;
transition: transform 1s;
transform-style: preserve-3d;
transform-origin: center right;
visibility:visible;
border: red 1px;
border-radius: 100%;
overflow: visible;
}
.red-color {
background: #dd4050;
}
.yellow-color {
background: #f7e85c;
}
.purple-color {
background: #823d84;
}
.green-color {
background: #3eb763;
}
.counter-card.is-flipped {
-webkit-transform:translateX(-100%) rotateY(-180deg);
-moz-transform:translateX(-100%) rotateY(-180deg);
-o-transform:translateX(-100%) rotateY(-180deg);
transform: translateX(-100%) rotateY(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
color: white;
border-radius: 100%;
top: 0;
left:0;
overflow: visible;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.card__face--front {
/* background: #DD4050; */
}
.card__face--back {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
Html:
<div class="scene scene--card" style="width:80%;height:80%;">
<div class="counter-card">
<div class="card__face card__face--front red-color"></div>
<div class="card__face card__face--back yellow-color"></div>
</div>
</div>
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;
}
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