This question already has answers here:
Flip a 3D card with CSS
(2 answers)
Closed 6 years ago.
I have created a css3 animation, which animate on hover. But the horizontal flip is not working correctly when i hover it keeps moving around and doest seem to repond correctly on hover either. How can i fix this?
It doest work on chrome for me and on firefox when it switched to 8 it moves
JSFiddele
<style type="Text/css">
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 10px;
border: 1px solid #CCC;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#card.flipped {
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card figure {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#card .front {
background: red;
}
#card .back {
background: blue;
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}
#card:hover {
transform:rotateY(180deg);
}
</style>
HTML
<body>
<section class="container">
<div id="card">
<figure class="front">7</figure>
<figure class="back">8</figure>
</div>
</section>
</body>
This solution is taken from the blog of David Walsh i hope it can you help you
Check this Fiddle
Blog page
<div class="flip-container">
<div class="flipper">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
If this solution does not suit your needs, i apologize for making you lose time.
You need to add margin: 0 to your #card
Here's a working JSFiddle
please replace this .container class with
.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 10px;
border: 1px solid #CCC;
}
I think after do that this will work fine, no need to add "perspective" property.
Related
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>
The cards are supposed to flip to reveal text on the back side. This works perfectly fine on my windows laptop and also on phones but seems to not work on Mac. Why is that?
I found a similar question asked on 2013 -webkit-transform: rotateY fails on Mac OS (in Chrome)
I hope it's either been fixed or there's a workaround for this by now.
Please help. Here's a codepen
Code:
HTML:
<div id="services" class="servicesSection">
<div id="production" class="serviceCard service music">
<h4 class="card__face card__face--front">PRODUCTION</h4>
<p class="card__face card__face--back">This includes the creation of the complete backing track with
state of the art sound design and FX.</p>
</div>
<div id="songwriting" class="serviceCard service video">
<h4 class="card__face card__face--front">SONGWRTING / COMPOSITION</h4>
<p class="card__face card__face--back">We create a melody from scratch based on the concept of your song
and write lyrics as well.</p>
</div>
<div id="vocal" class="serviceCard service event">
<h4 class="card__face card__face--front">VOCAL PRODUCTION</h4>
<p class="card__face card__face--back">We polish and tune your vocals. This includes all the vocal FX &
stacking to make it sound well-rounded and professional. </p>
</div>
<div id="mixing" class="serviceCard service tech">
<h4 class="card__face card__face--front">MIXING/MASTERING</h4>
<p class="card__face card__face--back">Audio post-production to give you a release ready track which
will be of top-notch quality and match industry standards.</p>
</div>
<div id="sound" class="serviceCard service music">
<h4 class="card__face card__face--front">SOUND SUITES</h4>
<p class="card__face card__face--back">We tailor-make sound packages for your brand. We will create
music to emulate your brand's message. This will be completely unique to your brand to give it the
recall value it deserves.</p>
</div>
</div>
CSS:
.servicesSection {
display: flex;
align-items: center;
background-color: #FFFFFF;
/* height: 100vh; */
/* scroll-snap-align: center; */
position: relative;
width: 100%;
display: flex;
justify-content: space-between;
min-height: 100vh;
}
.service {
display: flex;
flex-direction: column;
flex: 1;
width: 25vw;
height: 25vw;
}
.musicService .serviceCard h4 {
margin: auto
}
.service a {
object-fit: contain;
margin: auto;
text-align: center;
text-decoration: none;
}
.service img {
object-fit: contain;
margin-top: auto
}
.service h4 {
margin: auto;
color: white;
margin-top: 20px
}
.homeService, .service {
cursor: pointer;
border: #fff 1px solid;
}
.video {
/* background-color: #3b5998; */
background-image: linear-gradient(to right, #8E0E00, #1F1C18)
}
.music {
/* background-color: #d61b1e */
background-image: linear-gradient(to right, #1F1C18, #8E0E00)
}
.event {
/* background-color: #FF7514; */
background-image: linear-gradient(to right, #1F1C18, #203A43, #2C5364)
}
.tech {
/* background-color: #38908f; */
background-image: linear-gradient(to right, #2C5364, #1F1C18)
}
.serviceCard {
height: 25vw !important;
transform-style: preserve-3d;
transform-origin: center;
transition: transform 500ms;
/* transition-delay: 0.500ms; */
cursor: pointer;
width: 100%;
height: 100%;
position: relative;
margin-left: 1px;
margin-right: 1px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateX(0%) rotateY(0deg);
box-shadow: 0 0 0 #000;
transform: translate3d(0, 0, 0);
-webkit-transition: 500ms;
-webkit-transform-style: preserve-3d;
-ms-transition: 500ms;
-moz-transition: 500ms;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 500ms;
transform-style: preserve-3d;
}
/* .serviceCard * {
pointer-events: none;
} */
.serviceCard.is-flipped {
transform: rotateY(-180deg);
backface-visibility: visible;
}
.card__face .card__face--back {
/* -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; */
-webkit-transition: 100ms;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(360deg);
-moz-transition: 100ms;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(360deg);
-o-transition: 100ms;
-o-transform-style: preserve-3d;
-o-transform: rotateY(360deg);
-ms-transition: 100ms;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(360deg);
transition: 100ms;
transform-style: preserve-3d;
transform: rotateY(360deg);
}
.card__face {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
}
.card__face--back {
transform: rotateY(180deg);
font-size: 18px;
padding: 5px;
background-color: #fff;
color: #000;
border: 1px solid #222;
font-weight: 900;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
letter-spacing: 0.5px;
}
jQuery:
$(document).ready(function () {
$('.serviceCard h4, .serviceCard p').on('mouseover', function () {
event.target
$(this).parent().addClass('is-flipped');
var parent = event.target.parentElement.id
bindMouseLeave(parent)
});
function bindMouseLeave(parent) {
$(this).on('mouseleave', function () {
// setTimeout(() => {
if (!event.target.parentElement.id || event.target.parentElement.id != parent)
$('#' + parent).removeClass('is-flipped');
// }, 1500);
});
}
})
I have a parent div with a class of .card and it has to children div, that rotates in opposite directions when their parent is hovered over to create a flipping card. If you hover over it and wait until the transition finishes it works fine, however if you hover over it then move the mouse of before the animation finishes the div with a class of .front rotates in the opposite direction, why and is there a way to fix this? In addition if you move the mouse on and off multiple times both children start turning at different times even though they have the same trigger- why?
https://jsfiddle.net/8pktgqpu/15/
.card,.front,.back{
width: 100px;
height: 160px;
margin: 1px;
}
.card{
position: relative;
}
.front{
background-color: red;
transform: perspective(400px) rotatey(0deg);
backface-visibility: hidden;
transition: transform 1s ease-in-out 0s;
}
.back{
backface-visibility: hidden;
transform: perspective(400px) rotatey(180deg);
background-color: blue;
transition: transform 1s ease-in-out 0s;
position: absolute;
top: 0;
}
.card:hover .front{
transform: rotatey(-180deg);
}
.card:hover .back{
transform: rotatey(0deg);
}
Add a div and use perspective and transform-style: preserve-3d; to get it
below an example
.flip {
width: 300px;
height: 500px;
perspective: 1000px;
}
.flip_box {
width: 300px;
height: 500px;
position: relative;
transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d
}
.front, .back {
position: absolute;
width: 300px;
height: 500px;
top: 0px;
left: 0px;
border: 1px solid #666;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front {
color: red;
font-size: 16px;
}
.back {
color: blue;
font-size: 18px;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.flip:hover .flip_box {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
<div class="flip">
<div class="flip_box">
<div class="front">
Hello
</div>
<div class="back">
Bye
</div>
</div>
</div>
Try this...
.card-container {
perspective: 1000px;
}
.card-container:hover .card, .card-container.hover .card {
transform: rotateY(180deg);
}
.card-container, .front, .back {
width: 100px;
height: 160px;
margin: 1px;
}
.card {
transition: 1s ease-in-out 0s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
background-color: red;
}
.back {
transform: rotateY(180deg);
background-color: blue;
}
<div class="card-container">
<div class="card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
I have a fiddle http://jsfiddle.net/nLhgT/
I followed the instructions here http://davidwalsh.name/css-flip and http://desandro.github.io/3dtransforms/docs/card-flip.html When I flip the card, only the front side is being shown (flipped). I can't seem to get the backface to show. I've read similar questions on stackoverflow saying the backface must be rotated first. It is indeed rotated initially in my example.
HTML
<ul>
<li>
<div class="container">
<div class="card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
</li>
</ul>
CSS
li {
width: 300px;
height: 260px;
position: relative;
perspective: 800px;
list-style-type: none;
}
.card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
-webkit-transition-duration: 400ms;
transition-duration: 400ms;
}
.card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card .front {
background: red;
}
.card .back {
background: blue;
-webkit-transform: rotateY( 180deg );
transform: rotateY(180deg);
}
.card.flip {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
JS
$(document.body).on('click', '.card', function() {
console.log("CLICK");
document.querySelector('.card').classList.toggle("flip");
});
The only difference in my example is that the card is within an unordered list. I intend to make a list of these cards. But I don't think that should affect things.
So the main problem is that preserve-3d isn't supported by IE. Huge bummer, but not much that can be done about it. Therefore, you should be applying the transform to each child element, not the entire card.
The best way I've found of making a card flip is as follows:
Transform each face. The front should default to 0, the back to 180. When flipped, they should be 180 and 360 respectively.
Apply a z-index to them. The visible face should have something like 10, while the hidden one has 0. This ensures that the right one is in front at all times (even in browsers that don't support transformations)
Here is my update to your Fiddle showing a working card flip.
Here you go...
Demo Fiddle
HTML:
<ul>
<li>
<div class="container" id="flip-toggle">
<div class="card">
<div class="front">front</div>
<div class="back">back</div>
</div>
</div>
</li>
</ul>
CSS:
li {
width: 300px;
height: 260px;
position: relative;
perspective: 800px;
list-style-type: none;
}
.container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
#flip-toggle.flip .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
filter: FlipH;
-ms-filter:"FlipH";
}
.container, .front, .back {
width: 300px;
height: 260px;
}
.card {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background: red;
z-index: 2;
}
.back {
background: blue;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
JS:
$(document.body).on('click', '.card', function () {
console.log("CLICK");
document.querySelector('#flip-toggle').classList.toggle('flip');
});
I have the banner on my website to display some clouds.
You can see it here: http://sharix.dyndns.org/StackOverflowVisible.php
These clouds should be confined within the banner box. This was working until today. It stopped without me touching anything. Now they seem to ignore the overflow: hidden; rule in the default.css file.
Adding a second overflow: hidden; rule to the #world div seems to work, but it breaks the transform-style: preserve-3d; rules. You can see it here: http://sharix.dyndns.org/StackOverflowHidden.php
How to have both the 3d-transforms and the overflow rules working, like it was until today?
The interesting part of the default.css file:
#header {
background: #4b6983;
border: 2px solid #7590ae;
text-align: center;
padding: 0px;
margin: 10px 10px 0px 10px;
color: #ffffff;
text-shadow:0px 1px 5px black;
}
#viewport {
overflow: hidden;
background-image: $gradient;
background-image: $oGradient;
background-image: $mozGradient;
background-image: $webkitGradient;
background-image: $msGradient;
}
#header-content:hover {
z-index: 2;
transform: translateZ( 1px );
-moz-transform: translateZ( 1px );
-webkit-transform: translateZ( 1px );
-o-transform: translateZ( 1px );
-ms-transform: translateZ( 1px );
}
#world:before {
content: "";
background: url(zvezde.png);
opacity: $starOpacity;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
#world {
overflow: hidden; /*added today to confine the clouds. breaks preserve-3d*/
position: relative;
top:-100px;
height: 150px;
width:140%;
margin-left:-20%;
margin-bottom:-100px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
pointer-events:none;
}
.cloudBase {
position: absolute;
left: 50%;
top: 250px;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
}
.cloudLayer {
/* display:none; */
position: absolute;
left: 50%;
top: 50%;
width: 256px;
height: 256px;
margin-left: -128px;
margin-top: -128px;
-webkit-transition: opacity .5s ease-out;
-moz-transition: opacity .5s ease-out;
-o-transition: opacity .5s ease-out;
}
HTML:
<body>
<div id="page">
<div id="header">
<div id="viewport">
<div id="header-content">
<h1>Title text</h1>
☁ ☁ ☁
</div>
<div id="world"></div>
</div>
<script type="text/javascript" src="/scripts/oblaki-full.js"></script>
</div>
<div id="footer">
10. April 2013 ~ server uptime: 5:23 ~ load averages: 0.32, 0.39, 0.45 </div>
</div>
</body>