I'm stuck on this and I've run into a brick wall, all works in Chrome, FF, Safari etc but in Internet Explorer, I get the reverse side of the front image rather than backside text, please help!!! I'm sure there's a simple answer I've overlooked but I'm on a deadline and desperatly need to get this wrapped up.
Thanks in advance for any help :)
CSS
flip-container {
perspective: 1000px;
-webkit-perspective:1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
font-family: "Montserrat Alternates regular";
text-align: center;
}
.flip-container, .front, .back {
width: 250px;
height: 250px;
font-family: "Montserrat Alternates regular";
}
/* flip speed goes here */
.flipper {
-webkit-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
-webkit-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility: hidden;
margin: auto;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
width: 246px;
height: 246px;
}
/* back, initially hidden pane */
.back {
z-index:3;
background-color: #fff;
border: 2px solid black;
border-radius: 30px;
-moz-border-radius: 30px;
-khtml-border-radius: 30px;
-webkit-border-radius: 30px;
width: 246px;
height: 246px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
HTML:
<div class="grid-element">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front" style="background: url('images/flip2.jpg');" />
<span style="font-family: 'Montserrat Alternates regular';
font-weight:bolder; text-align: center; position: relative; top: 190px; font-size:
18pt;">Who Are We?</span> </div>
<div class="back">
<div style="text-align: center; font-family: 'Montserrat Alternates regular';
font-size: 10pt; position: relative; top: 10px;margin-left:10px; margin-right:10px;
margin-top:10px;">Founded by writers Kurt McClung and Simon Mackenzie to offer
complete story solutions for ambitious entertainment in various media: from video
games to comic books, theater and screen, novels to song writing.</div>
<img src="images/kurt.png" style="position:absolute; top:155px; left:18px; width:75px;
height:75px"/>
<img src="images/simon.png" style="position:absolute; top:155px; left:152px;
width:75px; height:75px"/>
</div>
</div>
</div>
</div>
Target site : http://www.taliespin.com
try adding -ms-perspective:1000px; as well to the following
flip-container {
perspective: 1000px;
-webkit-perspective:1000px;
}
(i'm on a mac right now, can't test in IE so its a wild guess)
Related
Can we put more than 2 text or images in 'Flip-animation' or 'Flip-motion', if yes,then how?
I googled it, but couldn't find any satisfying answer. I searched this here too,but no question matched my requirements.
I require the text flip-animation for at least 3 text.
This is the CSS:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 320px;
height: 427px;
}
.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;
}
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background-color: dodgerblue;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background-color:#5FBA7D;
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background-color: green;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
font-family: arial;
line-height: 2em;
}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<div>
<p class="back-title">Front</p>
</div>
</div>
<div class="back">
<div>
<p class="back-title">Back</p>
</div>
</div>
</div>
</div>
Its HTML written above:
I'm working on a website currently and I try to make the profile picture have a border-radius so it is round. This works in first instance, but after 1 second it pops back to a square.
The profile picture also flips around when hovered.
Any solutions?
.border
{
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.roundedImage {
overflow:hidden;
position:relative;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
width: 200px;
height:200px;
margin-left: auto;
margin-right: auto;
-webkit-animation:pop-in 0.8s;
-moz-animation:pop-in 0.8s;
-ms-animation:pop-in 0.8s;
}
.flip-container {
perspective: 1000;
z-index:3;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
margin-left:auto;
margin-right:auto;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
<div class="border">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="roundedImage">
<div class="flipper">
<div class="front">
<div style="background: url(Images/L2351108.jpg); height:200px; background-size: cover;"></div>
</div>
<div class="back">
<div style="background:url(Images/L2351070.jpg); height:200px; background-size:cover;"</div>
</div>
</div>
</div>
</div>
</div>
Remove the border attributes everywhere in you postet css (you don't need them) and add
.front div, .back div {
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
to your css. That works for me.
JSFiddle
I'm attempting to make a div appear by having it hidden forced via rotate and backface-visibility. The issue is that it is flickering and then disappears after a second. This happens on Chrome. On IE11 it is not appearing at all...
http://jsfiddle.net/1xq96btg/
It's working fine on Firefox.
EDIT: I'm using just backface-visibilty on its own as when I included its variants it became even more unstable and strange behaving.
EDIT 2: z-index doesn't seem to be helping either.
HTML
<div class="one-third-box" onclick="location.href='#'">
<div class="overlay"></div>
<img src="http://www.example.com/image/jpg" />
<div class="box-description">this is a test description</div>
</div>
CSS
.one-third-box {
float: left;
margin-bottom: 2px;
margin-right: 0.2%;
width: 33.2%;
position:relative;
perspective: 1000;
cursor:pointer;
}
.one-third-box:hover {
transform: rotateY(180deg);
transition: 0.6s;
transform-style: preserve-3d;
}
.one-third-box:hover img {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter:"FlipH";
position:relative;
top:-1px;
}
.one-third-box:hover .overlay {
backface-visibility: hidden;
}
.box-description {
backface-visibility: hidden;
background: none repeat scroll 0 0 #2f5d70;
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: lighter;
height: 38%;
padding-left: 10%;
padding-top: 6%;
position: absolute;
transform: rotateY(-180deg);
width: 100%;
padding-right: 10%;
}
.overlay {
position:absolute;
width:100%;
height:100%;
background:url('images/overlay.png');
}
.one-third-box > img {
width: 100%;
}
I got it to work by changing the CSS a bit...okay, a lot.
I'm assuming that this was being caused by inconsistent hardware acceleration between the overlapping elements and/or that transform-style: preserve-3d; line. Either way, I've created a snippet that seems to work for me. I also chose to go with a CSS animation instead of a transition because it just makes it that much more readable in this case.
* { margin: 0; padding: 0; } /* Simple CSS reset */
.one-third-box {
position: relative;
display: inline-block;
cursor: pointer;
width: 33.2%;
}
.one-third-box > img {
transform-style: flat;
width: 100%;
transform: translate3d(0,0,0); /* Fixes blur from scaling */
}
.box-description {
position: absolute;
box-sizing: border-box;
backface-visibility: hidden;
background: none repeat scroll 0 0 #2f5d70;
bottom: 0;
color: #fff;
font-size: 18px;
font-weight: lighter;
height: 38%;
padding-left: 10%;
padding-top: 6%;
width: 100%;
padding-right: 10%;
transform: rotateY(-180deg);
}
/* ---------------------- Hover effects ---------------------- */
.one-third-box:hover > img,
.one-third-box:hover > .box-description {
-webkit-animation: flip 0.6s;
animation: flip 0.6s;
transform: rotateY(0deg);
}
/* flip animation */
#-webkit-keyframes flip {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
#keyframes flip {
from { transform: rotateY(180deg); }
to { transform: rotateY(0deg); }
}
<div class="one-third-box" onclick="location.href='#'">
<div class="overlay"></div>
<img src="http://www.surgemedia.ie/portfolio-images/alci-clear.png" />
<div class="box-description">this is a test description</div>
</div>
Im hoping someone can help me get my code to flip my second image properly (not mirror image) when viewed in IE. I think I have it working properly in the other browsers.
My goal is to have picture #1 show, then upon button click show the picture #2.
The code also uses javascript + jquery but my knowledge currently is limited.
Can someone offer a solution via css that I can add or amend my code with to accomplish what I am trying to do? Thanks.
My fiddle: http://jsfiddle.net/zgn9kd0L/6/
HTML
<div id="block" class="block" onclick="changeClass()">
<div class="front side">
<img src="http://imgur.com/etY8veW.jpg" alt="" />
</div>
<div class="back side">
<img src="http://imgur.com/DiSXWpR.jpg" alt="" />
</div>
</div>
<button class="flip">Flip</button>
CSS
#container {
height: 500px;
width: 500px;
position: relative;
/*perspective*/
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
-o-perspective: 500;
perspective: 500;
}
.block {
position: relative;
height: 500px;
width: 500px;
/*transform-style*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
/*transition*/
-webkit-transition: -webkit-transform 1.5s;
-moz-transition: -moz-transform 1.5s;
-o-transition: -o-transform 1.5s;
transition: transform 1.5s;
}
.rotated {
/*transform*/
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.side {
position: absolute;
/*backface-visibility*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.front {
}
.back {
/*transform*/
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip {
background: white;
font-family: 'open sans';
font-weight: 400;
color: #5b5b5b;
border-radius: 5px;
margin-top: 1em;
}
IE10+ only has partial support for the property transform-style: preserve-3d. I assume that's why it wasn't working.
Here is a similar alternative that works in IE. (updated example)
HTML
<div class="block">
<div class="front side">
<img src="http://imgur.com/etY8veW.jpg" alt="" />
</div>
<div class="back side">
<img src="http://imgur.com/DiSXWpR.jpg" alt="" />
</div>
</div>
CSS - vendor prefixes omitted. See the example.
.block {
width: 500px;
height: 500px;
position: relative;
perspective: 500;
}
.side {
position: absolute;
transition: transform 0.5s;
backface-visibility: hidden;
}
.side.rotated {
transform: rotateY(360deg);
}
.back {
transform: rotateY(180deg);
}
If you are looking for Pure CSS Solutions here are few:
Create a CSS Flipping Animation
Working Demo
HTML:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<span class="name">David Walsh</span>
</div>
<div class="back">
<div class="back-logo"></div>
<div class="back-title">#davidwalshblog</div>
<p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
CSS:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 427px;
}
.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;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background: url(http://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f8f8f8;
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(http://davidwalsh.name/demo/logo.png) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
font-family: arial;
line-height: 2em;
}
I'm building a personal website and in the header section(i.e div) i've a logo for which i'm trying to add flip animation on hover, to show the content written back of the logo. Need a help in fixing the problem with browser Chrome as well as IE11. Works fine with Mozilla.
<div id="logo">
<div id="logo_card" class="shadow">
<div class="front face">
<img src="./images/logo+.jpg" />
</div>
<div class="back face center">
<p>Sooner the logo will be changed</p>
</div>
</div>
CSS for animation:
#logo{
width:450px;
height:150px;
margin-left:300px;
border-radius: 5px;
z-index: 1;
}
#logo {
perspective: 1000;
}
#logo_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
transition: all 1s linear;
border-radius: 5px;
}
#logo:hover #logo_card {
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-shadow: -5px 5px 5px #aaa;
-webkit-box-shadow: -5px 5px 5px #aaa;
box-shadow: 0 2px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border-radius: 5px;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 5px;
}
.face.back {
display: block;
-moz-transform: rotatey(180deg);
-ms-transform: rotatey(180deg);
-o-transform: rotatey(180deg);
-webkit-transform: rotatey(180deg);
transform: rotatey(180deg);
-moz-box-sizing: border-box;
box-sizing: border-box;
/*padding: 10px;*/
color: white;
text-align: center;
background-color: transparent;
border-radius: 5px;
font-size:20px;
font-family: 'Helvetica Neue',Helvetica,arial,sans-serif;
}
Greately this works fine with Mozilla firefox browser only :(
Thank you,