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>
Related
I want to rotate my element repeatedly, without back flip. When I call my function first time it will rotateX('180deg'), and the second will be rotateX('360deg') but the problem when I call third time it will be backflip, so any idea to make this flip keeping forward without back flip?
function myFunction() {
if (document.getElementById("front").style.transform == "" || document.getElementById("front").style.transform == "rotateX(0deg)") {
document.getElementById("front").style.transform = "rotateX(180deg)";
document.getElementById("back").style.transform = "rotateX(0deg)";
} else if (document.getElementById("front").style.transform == "rotateX(180deg)") {
document.getElementById("front").style.transform = "rotateX(360deg)";
document.getElementById("back").style.transform = "rotateX(180deg)";
} else {
document.getElementById("front").style.transform = "";
document.getElementById("back").style.transform = "rotateX(-180deg)";
}
}
.flipcard {
position: relative;
width: 220px;
height: 160px;
perspective: 500px;
}
.flipcard.h .back {
transform: rotateX(-180deg);
}
.flipcard .front,
.flipcard .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.5s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<div class="flipcard h">
<div class="front" id="front">
This is the front side
</div>
<div class="back" id="back">
This is the back side
</div>
</div>
<button onclick="myFunction()">Flip The Image</button>
Simplify DOM, simplify JS and optimize CSS.
This is the best way to make a spinning card:
var card = document.querySelector('.card');
card.addEventListener( 'click', function() {
card.classList.toggle('is-flipped');
});
body { font-family: sans-serif; }
.card {
position: relative;
cursor: pointer;
transform-style: preserve-3d;
transform-origin: center right;
transition: transform 1s;
width: 200px;
height: 260px;
border: 1px solid #CCC;
margin: 40px 0;
perspective: 600px;
}
.card.is-flipped {
transform: rotateX(-180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 40px;
backface-visibility: hidden;
}
.card__face--front {
background: red;
}
.card__face--back {
background: blue;
transform: rotateX(180deg);
}
<div class="card">
<div class="card__face card__face--front">front</div>
<div class="card__face card__face--back">back</div>
</div>
You can do something like this:
$('#btnClick').click(function() {
$('.flip-container').toggleClass("flipped");
});
.flip-container.flipped .flipper {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
position: relative;
}
.flip-container,
.front,
.back {
width: 200px;
height: 200px;
}
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 500;
cursor: pointer;
top: 0;
width: 200px;
height: 200px;
}
.flip-container .back {
transform: rotateX(-180deg);
background-color: #000;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 200px;
height: 200px;
display: block;
}
.flip-container .front,
.flip-container .back {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all 0.6s ease-in;
color: white;
background-color: #000;
padding: 10px;
backface-visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<p>This is the front side </p>
</div>
<div class="back">
<p> This is the back side </p>
</div>
</div>
</div>
<button id="btnClick">Flip The Image</button>
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>
Below is the my code
http://liveweave.com/ks0njD
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
and CSS:
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
}
.box2{
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
perspective: 1000px;
}
.container:hover .box1{
transform: rotate(60deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
transform: translateY(84px) rotate(-60deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
As you can see, when the divs rotate there is slight distortion, is there anyway i can make this look perfect ? i tried using backface and perspective but doesnt makes any difference.
#Amer what you mean from 'look perfect'? Something like this?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 15px;
background: black;
top: 112px;
left: 200px;
background:#3ac7f2;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2{
position: relative;
width: 100px;
height: 15px;
background: black;
top: 93px;
left: 200px;
background:#3ac7f2;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.container:hover .box1{
background:#09F;
transform:background .4s ease-in-out;
transform: rotate(-45deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
background:#09F;
transform:background .4s ease-in-out;
transform: translateY(68px) rotate(45deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
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.