I created an HTML flip card using CSS. However, when the card flips there is a flicker (as if it almost won't turn over fully). This glitch happens mainly when the cursor is moved directly in the center of the card.
Any help is greatly appreciated!
.card-box {
width: 100px;
height: 50px;
position: relative;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s ease;
}
.card:hover {
transform: rotateY(180deg);
}
.front {
background: red;
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
background: blue;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(180deg);
}
<div class="card-box">
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
Here is a link to the jsfiddle: https://jsfiddle.net/rogybear/tfcu3qkr/3/
added
.card-box:hover .card {
transform: rotateY(180deg);
}
.card-box {
width: 100px;
height: 50px;
position: relative;
}
.card {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: 1s ease;
}
.card-box:hover .card {
transform: rotateY(180deg);
}
.front {
background: red;
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.back {
background: blue;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(180deg);
}
<div class="card-box">
<div class="card">
<div class="front">
Front
</div>
<div class="back">
Back
</div>
</div>
Related
I have tried a multitude of "fixes" to try to fix the animation and just cant figure out why behavior differs so much from chrome and safari. The only it seems like backface visibility is not being applied but the common fix of applying rotateY(0deg) to the parent doesnt fix the issue
.scene {
margin-left: auto;
margin-right: auto;
margin-top: 10em;
width: 10em;
height: 10em;
perspective: 800px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
-webkit-animation: spinning 12s linear infinite;
animation: spinning 12s infinite;
transform-style: preserve-3d;
transform-origin: center;
}
#-webkit-keyframes spinning {
0% {
-webkit-transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spinning {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg);
}
}
.out-side {
display: flex;
width: 200%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
-moz-backface-visibility: hidden;
}
.cover {
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: blue;
}
.back {
transform: rotateY(-50deg);
transform-origin: right;
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: blue;
}
.in-side {
display: flex;
width: 200%;
height: 100%;
position: absolute;
line-height: 10em;
text-align: center;
-moz-backface-visibility: hidden;
}
.left {
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: red;
transform: rotateY(-180deg) !important;
transform-origin: right;
}
.right {
transform: rotateY(-230deg) !important;
transform-origin: left;
height: 100%;
width: 50%;
border-style: solid;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
background-color: red;
}
<div class="scene">
<div class="cube">
<div class="out-side">
<div class="back">back</div>
<div class="cover">cover</div>
</div>
<div class="in-side">
<div class="left">
<img style="width:100%;height:auto;" src="https://www.sciencenewsforstudents.org/wp-content/uploads/2020/10/100220_CG_megalodon_feat-1028x579.jpg" />
</div>
<div class="right">
<img style="width:100%;height:auto;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpNBYv1lZ9MxxDR0qlqYm88RLm5ymSmf03dg&usqp=CAU" />
</div>
</div>
</div>
</div>
Guys, I hope you are all fine, Guys am facing a problem actually I have a CSS flip box code but in this code, it's just showing 1 flip box in one row I want 4 flip boxes in one row how can I do this please help me Thanks.
Here is my code:
<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>
CSS:
.box {
position: inherit;
top: calc(50% - 200px);
left: calc(50% - 150px);
width: 300px;
height: 400px;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}
add display: inline-block; to your .box. And you can make 4 instances of your flip box in the HTML. Also your heights were a little weird, so this might be what you want?
.box {
position: inherit;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
display: inline-block;
float: center;
padding: 5px;
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}
.container {
text-align: center;
}
<div class="container">
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
</div>
I have a "card" design in which I have an div with two children, a "front" and a "back". A "card flipping" effect is achieved by applying a rotateY(180deg) transform to the card, hiding the back-face.
I've noticed a few differences between chrome and firefox. On firefox, the animation is smooth, on chrome, there's a flash of white. But most importantly, an input element on the "back" face of the card is not clickable in Chrome.
You can see the effect in each browser in these gifs:
Any ideas on what is going on?
Code available at this pen: https://codepen.io/elbasti/pen/poJjLmP
function flipCard() {
var element = document.getElementById("flipper-container");
element.classList.toggle("flipper--flipped");
}
.flipper {
perspective: 1000px;
width: 200px;
height: 200px;
flex: 0 1 auto;
}
.card {
height: 200px;
width: 200px;
transition: transform 1s;
transform-style: preserve-3d;
padding: 0px;
backface-visibility: hidden;
}
.card__face {
box-sizing: border-box;
border-radius: 12px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
padding: 20px;
backface-visibility: hidden;
}
.card__face--back {
background-color: #9e0495;
position: relative;
height: 100%;
color: white;
transform: rotateY(180deg);
}
.card__face--front {
background: gray;
}
.flipper.flipper--flipped .card {
transform: rotateY(180deg);
transition: transform 0.5s;
}
<div id="flipper-container" class="flipper">
<div class="card">
<div class="card__face card__face--back">
<p>I am the back</p>
<input type="text" placeholder="Back input">
<p>The back one doeesn't work in chrome :(</p>
</div>
<div class="card__face card__face--front">
<p>I am the front</p>
<input type="text" placeholder="Front input">
<p>The front input works.</p>
</div>
</div>
</div>
<button id="toggle-flip" onclick="flipCard()">Click me</button>
It seems, that .card overlaps the back after rotation.
Maybe you could rotate not .card but .card__face--front and .card__face--back. I made some modifications in snippet.
function flipCard() {
var element = document.getElementById("flipper-container");
element.classList.toggle("flipper--flipped");
}
.flipper {
perspective: 1000px;
width: 200px;
height: 200px;
flex: 0 1 auto;
}
.card {
height: 200px;
width: 200px;
transition: transform 1s;
transform-style: preserve-3d;
padding: 0px;
backface-visibility: hidden;
}
.card__face {
box-sizing: border-box;
border-radius: 12px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
padding: 20px;
backface-visibility: hidden;
}
.card__face--back {
background-color: #9e0495;
position: absolute;
height: 100%;
color: white;
transform: rotateY(180deg);
transition: transform 0.5s;
}
.card__face--front {
background: gray;
transition: transform 0.5s;
}
.flipper.flipper--flipped .card__face--front {
transform: rotateY(-180deg);
transition: transform 0.5s;
}
.flipper.flipper--flipped .card__face--back {
transform: rotateY(0deg);
transition: transform 0.5s;
}
<div id="flipper-container" class="flipper">
<div class="card">
<div class="card__face card__face--back">
<p>I am the back</p>
<input type="text" placeholder="Back input">
<p>The back one doeesn't work in chrome :(</p>
</div>
<div class="card__face card__face--front">
<p>I am the front</p>
<input type="text" placeholder="Front input">
<p>The front input works.</p>
</div>
</div>
</div>
<button id="toggle-flip" onclick="flipCard()">Click me</button>
I try to rotate the image and enlarge it (preferably to display in the center of the screen) but it does not work.
The second problem is that when an object grows, it is under other objects (z-index does not help).
Any one can help?
.flip-container {
-webkit-perspective: 1000;
}
.flipped {
-webkit-transform: scale(2);
-webkit-transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 350px;
height: 230px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
position: relative;
}
.front,
.back {
-webkit-backface-visibility: hidden;
position: absolute;
}
.front {
z-index: -1;
}
.back {
-webkit-transform: rotateY(180deg);
}
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>
You can not set 2 transforms like this
transform: scale(2);
transform: rotateY(180deg);
As they are the same property, one will overwrite the other.
instead, concatenate the values
transform: scale(2) rotateY(180deg);
.beneath {
width: 350px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
}
.txt {
height: 25px;
}
.beneath p {
float: left;
}
.beneath img {
width: 100%;
}
.flip-container img {
width: 100%;
}
.flipped {
transform-origin: center center;
transform: rotateY(180deg) scale(2);
}
.flip-container,
.flipper,
.front,
.back {
width: 350px;
height: 230px;
position: absolute;
top: 0;
left: 0;
}
.flipper {
transition: 0.6s;
}
.front,
.back {
backface-visibility: hidden;
}
.front {
z-index: 1;
}
.back {
transform: rotateY(180deg);
}
<!-- elements beneath - example only -->
<div class="beneath txt">
<p>This is all beneath.</p>
</div>
<div class="beneath">
<img src="http://via.placeholder.com/350x150" />
</div>
<!-- Original -->
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>
I'm lost on why it's not working for you. I've adjusted some of the code, but without extensive code, it's hard to determine what might be causing your issues.
I did notice you had a z-index of -1. I'm guessing since you said it didn't make a difference, it's a leftover from trial-and-error.
I took out relative positions, relocated your absolute position, and fixed your z-index.
From what I can tell, it's working. There may be deeper issues in your code.
.beneath {
width: 350px;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
}
.txt {
height: 25px;
}
.beneath p {
float: left;
}
.beneath img {
width: 100%;
}
.flip-container img {
width: 100%;
}
.flipped {
-webkit-transform: scale(2);
-webkit-transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 350px;
height: 230px;
position: absolute;
top: 0;
left: 0;
}
.flipper {
-webkit-transition: 0.6s;
}
.front,
.back {
-webkit-backface-visibility: hidden;
}
.front {
z-index: 1;
}
.back {
-webkit-transform: rotateY(180deg);
}
<!-- elements beneath - example only -->
<div class="beneath txt">
<p>This is all beneath.</p>
</div>
<div class="beneath">
<img src="http://via.placeholder.com/350x150" />
</div>
<!-- Original -->
<div class="flip-container">
<div class="flipper" onclick="this.classList.toggle('flipped')">
<div class="front">
<img id="services_img" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66">
</div>
<div class="back">
Wszystko za darmo
</div>
</div>
</div>
I have a code to make flip to a div. It's working fine in Firefox and Chrome, but in IE when the card flips, it shows the front side upside down instead of show the back side.
This is the code:
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
transform: rotateX( 180deg ) ;
transition: transform 0.5s;
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.back {
background: #03446A;
color: white;
transform: rotateX( 180deg );
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>
As Shaggy commented, IE doesn't support preserve-3d. It also lacks support for backface-visibility: hidden;
So,you can not rotate the container, you have to rotate the elements individually.
And you need to adjust the visibility (with half the transition time, you want it to happen in the middle of the rotation.
This is the result, working ok on modern browsers and also on IE
body {
background: #eee;
}
.card{
width: 300px;
height: 300px;
}
.content {
width: 300px;
height: 300px;
perspective: 500px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
transition: transform 1s;
transform-style: preserve-3d;
}
.card:hover .content {
}
.front,
.back {
position: absolute;
height: 100%;
width: 100%;
background: white;
line-height: 300px;
color: #03446A;
text-align: center;
font-size: 60px;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transition: visibility 0.5s, transform 1s;
}
.card:hover .front {
visibility: hidden;
transform: rotateX(180deg);
}
.back {
background: #03446A;
color: white;
transform: rotateX( -180deg );
transition: visibility 0.5s, transform 1s;
}
.card:hover .back {
transform: rotateX(0deg);
}
<div class="card">
<div class="content">
<div class="front">
Front
</div>
<div class="back">
Back!
</div>
</div>
</div>