I have created a flip transition between two divs using the following css...
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-o-perspective: 1000;
perspective: 1000;
max-width: 320px;
width: 100%;
}
/* flip speed goes here */
.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;
}
.flipper > img {
opacity: 0;
z-index: 0;
}
.flipper.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
overflow: 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);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
With the following html...
<div class="flip-container">
<div class="flipper" id="flipper" onclick="this.classList.toggle('flipped')">
<div class="front" id="front"></div>
<div class="back" id="back"></div>
</div>
</div>
I now have two problems...
After flip only the right half of the presented <div> is registering the onClick
Where the browser doesn't support the transition I would like this to degrade to either:
a simple non-animated version
or the two <div>'s side-by-side
Any solutions/suggestions to fix either of these greatly appreciated.
For the right half, I encounter this with my website (http://worldisbeautiful.net) which use the flip animation too. It looks like a webkit bug, your animation works fine with firefox.
I had some hard time to avoid this bug, and i'm not sure how you can avoid it with your animation because mine involve 2 additionals DIV inside "back" DIV.
However, I had to use pointer-events: none; inside the back div, hope it can help you.
For the second question, i suggest you to display degraded version by default. Then, you can use something like Modernizr to check for browsers supports and then use the CSS you need for your animation.
http://modernizr.com/
You'll need to check for csstransitions, csstransforms and csstransforms3d.
I have the same problem earlier with card flip , now i have got the solution for all the browsers for card flip even for IE10 fixes. i have written for hover please use the required code as per yours requirement.
HTMl Strucrure
<div class="flip-container">
<div class="flipper">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
css
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective:1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
}
/* for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: for IE */
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 0;
left: 0;
width: 180px;
height: 180px;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-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;
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
width: 180px;
height: 180px;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background-position: center center;
z-index: 2;
background:green;
}
.back {
background: #f2f2f2;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(-180deg);
}
Demo on Jsfiddle
To 2.
have you ever looked at modernizr. (only works if js is active).
This library tests for css features and adds a the corresponding class to the html tag. (e.g. csstransforms). With this you could style the area corresponding to the supported features.
e.g. having a such a rule in you stylesheet:
/*this is the common rule*/
.theArea {
border: 1px solid green;
}
/*this rule will be applied if transitions are available*/
.csstransforms .theArea {
border: 1px solid red;
}
At http://modernizr.com/download/ you have a list of all features you can test for.
It does not really test if the feature exists. But test if the corresponding keywords that are used are know by the browser, if yes then it is most likely that the browser supports that feature.
Related
I need some help here. I'm trying to make a hamburger menu for my website but for some reason which I can't figure out, it doesn't work. Here's the HTML, CSS and JavaScript code which I've written in codepen.io:
https://codepen.io/TheUnrealisticProgrammer/pen/QvjvVW
Here's the JavaScript code:
$(document).ready(function(){
$('Menu').click(function(){
$(this).toggleClass('Trigger');
});
});
From the code, the first span bar should animate by rotating 135 degrees after I click on it but it's not.
Use Jquery and JQuery UI before using. And $('Menu') Menu is not a tag but it is ID of div as per your Code Pen. It has to be $('#Menu').
your css style is broken,
you don't have jQuery (add through setting)
$('Menu') this is jQuery as other said, you are selecting id so should be $('#Menu')
check this link for working example, fixed jQuery, js and CSS:
https://codepen.io/hdl881127/pen/wdKZVj
fixed css:
#Menu{
position:relative;
margin-top:20px;
margin-left:20px;
display:block;
height:50px;
cursor: pointer;
width:50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}
#Menu span{
position:absolute;
background:orange;
display:block;
height: 6px;
width: 100%;
border-radius:50px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#Menu span:nth-child(1){
top:0px;
}
#Menu span:nth-child(2){
top:18px;
}
#Menu span:nth-child(3){
top:36px;
}
#Menu.Trigger span:nth-child(1){
top: 18px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#Menu.Trigger span:nth-child(2){
top: 18px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
transform: rotate(225deg);
}
#Menu.Trigger span:nth-child(3){
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Please do these steps.
Go to your code pen
Click on the setting icon available in the JS section.
Add jquery reference (https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js) by clicking on the add another resource button placed at the right bottom of the dialog box.
In your javascript, you are using $('Menu'). which is actually searching for the tag called Menu. Change it to $('#Menu'). As you want to target to the ID.
It will work perfectly fine.
How to set the child div height as parent height? i don't want to set height in CSS.
Here parent div height is 300px, but car1front & card1back is not taking that height? In css i given height is auto, even though is not taking.
please see the JSFiddle link: http://jsfiddle.net/tvrajja/08samL77/
Note: flip-container div actually resides in usercontrol.aspx
Thanks for your help.
<div style="height: 300px">
<div id="FlipMainId" class="flip-container" ontouchstart="this.classList.toggle('hover');" runat="server">
<div id="Card1" class="flipper" runat="server">
<div id="Card1Front" class="front" runat="server">
<div class="name">
Front
</div>
</div>
<div id="Card1Back" class="back" runat="server" style="border: solid">
Back
</div>
</div>
</div>
</div>
What imgonzalves said you have to add height: 100%;
Its working for me in your fiddle with this css:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-ms-transform: perspective(1000px);
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
height: 100%;
width: 100%;
}
/* START: Accommodating for IE */
.flip-container:hover .back, .flip-container.hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
.flip-container:hover .front, .flip-container.hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
/* END: Accommodating for IE */
.flip-container, .front, .back {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0px;
}
.flipper {
height:100%;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transition: 0.6s;
-moz-transition: 0.6s;
-moz-transform: perspective(1000px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
height:100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(0deg);
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-moz-transform: rotateY(0deg);
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
-o-transform: rotateY(0deg);
-ms-transition: 0.6s;
-ms-transform-style: preserve-3d;
-ms-transform: rotateY(0deg);
transition: 0.6s;
transform-style: preserve-3d;
transform: rotateY(0deg);
position: absolute;
top: 0;
left: 0;
align-content: center;
}
.front {
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
z-index: 2;
}
.back {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
border: none;
}
.front .name {
display: inline-block;
font-family: Helvetica, times, serif;
margin: 0 auto;
padding: 1px;
border-radius: 2px;
height: 100%;
width: 100%;
position: absolute;
background-color: #DCF3FF;
}
I have created some flip boxes on a website, that work great - In Chrome, but for some reason they are not working in Safari. I am very new to javascript, I actually had some amazing help on Stack Overflow to create these flip boxes. I just can't figure out if this is javascript, css or another issue.
If you want to check it out the site is www.dangoodeofficial.co.uk and the flip boxes in question are the SAX and DJ section at the top - the "MORE INFO" button triggers the flip.
I tried using Debugger in safari but I don't really know what I am looking for.
Any help would be really great. Thank you.
CSS
.flip3D {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D .front {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .back {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D .front.flip {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D .back.flip {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}
.flip3D2 {
float: left;
display: block;
position: relative;
width: auto;
height: 675px;
}
.flip3D2 .front2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .back2 {
position: absolute;
-o-transform: perspective(600px)RotateY( 180deg);
-moz-transform: perspective(600px)RotateY( 180deg);
-ms-transform: perspective(600px)RotateY( 180deg);
-webkit-transform: perspective(600px)RotateY( 180deg);
transform: perspective(600px)RotateY( 180deg);
-o-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-webkit-transform-backface-visibility: hidden;
backface-visibility: hidden;
transition: -o-transform .5s linear 0s;
transition: -moz-transform .5s linear 0s;
transition: -ms-transform .5s linear 0s;
transition: -webkit-transform .5s linear 0s;
transition: transform .5s linear 0s;
width: 100%;
}
.flip3D2 .front2.flip2 {
-o-transform: perspective(600px)RotateY( -180deg);
-moz-transform: perspective(600px)RotateY( -180deg);
-ms-transform: perspective(600px)RotateY( -180deg);
-webkit-transform: perspective(600px)RotateY( -180deg);
transform: perspective(600px)RotateY( -180deg);
}
.flip3D2 .back2.flip2 {
-o-transform: perspective(600px)RotateY( 0deg);
-moz-transform: perspective(600px)RotateY( 0deg);
-ms-transform: perspective(600px)RotateY( 0deg);
-webkit-transform: perspective(600px)RotateY( 0deg);
transform: perspective(600px)RotateY( 0deg);
}
Javascript
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.flip-btn-1').click(function(e) {
e.preventDefault();
jQuery(".front").toggleClass('flip');
jQuery(".back").toggleClass('flip');
});
});
jQuery( document ).ready(function() {
jQuery('.flip-btn-2').click(function(e) {
e.preventDefault();
jQuery(".front2").toggleClass('flip2');
jQuery(".back2").toggleClass('flip2');
});
});
</script>
i think this is css issue because css on safari sometime dont work
properly. its work at safari and chrome.
Try It
Demo
The problem seems to be in the vendor prefixed properties of backface-visibility.
Currently you have them written as:
-webkit-transform-backface-visibility: hidden;
-moz-transform-backface-visibility: hidden;
-ms-transform-backface-visibility: hidden;
-o-transform-backface-visibility: hidden;
backface-visibility: hidden;
Rewrite all those rules as:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
This should fix your problem in Safari as it will pick the value from the -webkit vendor prefixed CSS property.
I used CSS and Javascript in order to rotate a div after a click on it (from 0deg to 45deg). It's working good. I want the div to rotate back after a second click on it (from 45deg to 0deg), but nothing happens on the div... I didn't find more topics to fix this problem.
If you have any idea, it would be great ! Thanks.
Style
.home {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.home.active {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
Script
$(document).ready(function(){
$('.home').click(function(){
$('.home').removeClass('active');
$(this).addClass('active');
});
});
Try using toggleClass
$(document).ready(function(){
$('.home').click(function(){
$(this).toggleClass('active');
});
});
CSS3 can accomplish the transformation, See Firefox MDN Link for more info
HTML
<div class="description-wrapper">
<div class="category-desc-toggle rotate redbg"></div>
<div class="category-desc">REEED!</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle bluebg rotate"></div>
<div class="category-desc">Blue</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle yellowbg rotate"></div>
<div class="category-desc">Yellow Box</div>
</div>
Javascript
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
CSS
.description-wrapper {
width: 80px;
text-align: center;
margin-bottom: 20px;
}
.redbg {
background-color: red;
}
.bluebg {
background-color: blue;
}
.yellowbg {
background-color: yellow;
}
.rotate {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
width: 80px;
height: 75px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Working Demo
So, I'm just gonna show you my code, maybe something will jump out at you. I'm playing with some CSS3 and Transform (in the form of a cube)
This is my test site - http://warm-cove-2672.herokuapp.com/
That looks good, and works great inside of Chrome...
Firefox it doesn't keep its shape when you rotate the cube (and it's smaller?)...
IE it doesn't work at all...
css
#camera {
position: relative;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective: 800;
-moz-perspective-origin: 50% 200px;
-ms-perspective: 800;
-ms-perspective-origin: 50% 200px;
-o-perspective: 800;
-o-perspective-origin: 50% 200px;
#cube {
position: relative;
margin: 0 auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transition: -moz-transform 2s linear;
-moz-transform-style: preserve-3d;
-ms-transition: -ms-transform 2s linear;
-ms-transform-style: preserve-3d;
-o-transition: -o-transform 2s linear;
-o-transform-style: preserve-3d;
.face {
position: absolute;
height: 400px;
width: 400px;
padding: 5px;
border: 20px solid #333;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-size: 400px;
line-height: .9;
}
.a {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-ms-transform: translateZ(200px);
-o-transform: translateZ(200px);
}
.b {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(-90deg) translateZ(200px);
-moz-transform: rotateY(-90deg) translateZ(200px);
-ms-transform: rotateY(-90deg) translateZ(200px);
-o-transform: rotateY(-90deg) translateZ(200px);
}
.c {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-ms-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
}
.d {
background-color: rgba(255,255,255, 1.0);
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-ms-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
}
}
}
js
$('#cube').css({
"webkitTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"mozTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"msTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"OTransform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)",
"transform" : "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)"
});
Those rotate variables are either +90 or -90 depending on what's clicked.
Thoughts?
Firefox isn't liking the perspective property without the 'px'.
Try changing it to:
-moz-perspective: 800px;
For IE10 - it doesn't support preserve-3d. If you want this to work for IE10 as well you will need to apply transforms to each side.
Stu Nicholls has a demo of this on CSS play: CSS play - 3D Animated Cube for Internet Explorer IE10