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
Related
I'm using boostrap, and I'm making a flipping animation card inside a row (col-lg-12), the problem is that when I resize the screen the card doesn't act "responsive"
.flip {
-webkit-perspective: 800;
perspective: 800;
position: relative;
text-align: center;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
width: 270px;
height: 178px;
-webkit-transform-style: preserve-3d;
-webkit-transition: 0.5s;
transform-style: preserve-3d;
transition: 0.5s;
}
.flip .card .face {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 2;
}
.flip .card .front {
position: absolute;
width: 270px;
z-index: 1;
}
.flip .card .img {
position: relaitve;
width: 270px;
height: 178px;
z-index: 1;
border: 2px solid #000;
}
.flip .card .back {
padding-top: 10%;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.inner {
margin: 0px !important;
}
<div id="porosity" class="card">
<div class="face front">
<div class="inner">
<img src="http://placehold.it/100x100" class="img-responsive center-block" alt="">
<p>Porosity</p>
</div>
</div>
<div class="face back">
<div class="inner text-center">
<p>Permeable to fluids, permeable to outside influences.</p>
</div>
</div>
</div>
Full code: https://codepen.io/elunap/pen/rYJEVW
What I'm doing wrong?
If you mean that when you resize screen the flipping card stay at the left while the others stay at center, if you want to make the flipping card stay at center like the others, you have to add margin: auto as follow:
.flip .card {
/* New property added */
margin: auto
}
check the updated CodePen, hope this what you want.
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 want to fix text on image so that if my image moves or flips, my text also move or flip with the text. How can i do that ? I just want my text to be behave with the image animation.
Ex: If my image flips, Text on it should also flip.
If my image pops out , then text should also pop out
If my image moves , then text also come with it.
Overall , i just want to fix text on image.
Thanks
.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>
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>
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)