I've got a problem with "nested" backface-visibility.
I would like to have a flipping div, with content on both sides. For that, I use two div flipping, each one representing a face of my "two-faces" div (.face and .back).
The rotation works well.
Now, I want to hide their container, and reveal it when the page is loaded with another flip. But as you can see, my .face div is visible.
How could I avoid .face to be visible before my animation?
Here's the shorten working example I could made (Chrome favor):
.flip {
position: relative;
backface-visibility: hidden;
transform: rotateX(180deg);
animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
backface-visibility: hidden;
transition: 1s;
margin: 0;
padding: 20px;
border: 1px solid;
width: 200px;
text-align: center;
}
.back {
position: absolute;
top: 0;
left: 0;
}
.face,
.flip:hover .back {
transform: rotateX(0deg);
}
.flip:hover .face,
.back {
transform: rotateX(180deg);
}
#keyframes init {
from { transform: rotateX(180deg); }
to { transform: rotateX(0deg); }
}
<div class="flip">
<div class="face">FACE</div>
<div class="back">BACK</div>
</div>
If you want it to work in a nested way, you need the property
transform-style: preserve-3d;
in he parent:
.flip {
position: relative;
backface-visibility: hidden;
transform: rotateX(180deg);
transform-style: preserve-3d;
animation: init 1s ease 2s 1 normal forwards;
}
.flip div {
backface-visibility: hidden;
transition: 1s;
margin: 0;
padding: 20px;
border: 1px solid;
width: 200px;
text-align: center;
}
.back {
position: absolute;
top: 0;
left: 0;
}
.face,
.flip:hover .back {
transform: rotateX(0deg);
}
.flip:hover .face,
.back {
transform: rotateX(180deg);
}
#keyframes init {
from { transform: rotateX(180deg); }
to { transform: rotateX(0deg); }
}
<div class="flip">
<div class="face">FACE</div>
<div class="back">BACK</div>
</div>
Related
So I'm making a tic tac toe game right now and I'm trying to add in an animation for a line that shows who won. When the player wins by getting 3 horizontal things then the animation works perfectly but when they win vertically then there's a slight shake on it. Is there any way I can remove this?
Here is the CSS for the line:
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
To view the website and see what I'm talking about it's live on GitHub at this link https://bartycoding.github.io/Tic-tac-toe/
Try creating another div that increases the height instead of using the transform: rotate(90deg);
You could try with transform: scale():
#keyframes grow-left {
0% {
transform: scale(0,1);
}
100% {
transform: scale(1,1);
}
}
I actually fixed this by having the rotation as a global css variable and then changing that variable from javascript so the css looks like this:
#keyframes grow-left {
0% {
transform: rotate(var(--winLineRotation)) scaleX(0);
}
100% {
transform: rotate(var(--winLineRotation)) scaleX(100%);
}
}
.winLine {
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
transform: rotate(var(--winLineRotation));
}
To prevent that little shake at the end of animations, you need to use : backface-visibility:hidden; to the class of the element that you've defined animation for.
#keyframes grow-left {
0% {
width: 0;
}
100% {
width: 1;
}
}
.winLine {
/* Try this */
backface-visibility: hidden;
position: absolute;
width: 300%;
height: var(--borderThickness);
background-color: var(--textColor);
border-radius: 1rem;
transform-origin: center;
z-index: 2;
animation: grow-left 1s ease-in-out 0s;
opacity: 1;
}
I am hoping some of you might have some ideas regarding using Bulma Tiles (https://bulma.io/documentation/layout/tiles/). I am partially successful with getting the flip functionality to work using the input checkbox, but the content inside the tile is flipping, not the entire tile.
/* ==========================================
reference --> https://codepen.io/amazingrando/pen/yjbAh
========================================== */
.tile input[type="checkbox"] {
/*Hiding the checkbox. We never want to see it.*/
position: absolute;
left: -9999em;
}
.flip-tile {
cursor: pointer;
/*Animation elements*/
display: block;
perspective: 600px;
position: relative;
transition: all 0.1s;
&:hover {
transform: scale(1.02, 1.02);
}
}
.flip-tile-front, .flip-tile-back{
//position: absolute; top: 0; left: 0;
//width: inherit; height: inherit; /*Size of the card is set by the container*/
backface-visibility: hidden; /*Makes a card invisible from behind.*/
transform-style: preserve-3d;
transition: all 0.4s ease-in-out;
}
.flip-tile-front {
/*Default rotation values*/
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-back {
background: MediumPurple;
visibility: hidden;
/*Default rotation value*/
transform: rotateY(-180deg);
}
/*When the container is clicked the checkbox is marked as checked. This activates the CSS below. */
.tile input[type="checkbox"]:checked {
~ .flip-tile {
//animation: lift 0.4s linear;
.flip-tile-back {
visibility: visible;
transform: rotateX(0deg) rotateY(0deg);
}
.flip-tile-front {
transform: rotateY(180deg);
}
}
}
https://codepen.io/lostcook/pen/QWyvBey
Any ideas or help would greatly be appreciated.
Thanks
I'm trying to create an animated text like bellow using css, how can i do this?
I already tried this:
span1 {
display: inline-block;
color: #e74c3c;
position: relative;
white-space: nowrap;
top: 0;
left: 0;
-webkit-animation: move 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 1s;
}
#keyframes move {
0% {
top: 0px;
}
20% {
top: -50px;
}
40% {
top: -100px;
}
60% {
top: -150px;
}
80% {
top: -200px;
}
100% {
top: -300px;
}
}
<span1>
web developer<br /> css cowboy<br /> self-facilitating media node<br /> box inside a box<br /> part of the problem
</span1>
but it has a delay after last text that i need to remove!
See This:
*{
box-sizing: border-box;
}
body {
background-color: skyblue;
}
div {
overflow: hidden;
color: #fff;
text-align: center;
font-size: 20px;
position: relative;
height: 100px;
margin-top: 100px;
}
div p {
height: 100px;
animation: move 7s infinite linear;
position: relative;
bottom: -100px;
font-size: 36px;
margin: 0;
}
#keyframes move {
0% {bottom: -100px;}
10%, 20% {bottom: 0px}
40%,50% {bottom: 100px;}
70%,80% {bottom: 200px;}
100% {bottom: 300px}
}
<div>
<p>50% OFF</p>
<p>Some Text</p>
<p>Write by: Ehsan Taghdisi</p>
</div>
.anim1 {
animation: anim1 1.5s infinite;
}
.anim2 {
animation: anim2 1.5s infinite;
}
#keyframes anim1 {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(-10px);
}
}
#keyframes anim2 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-80px);
}
100% {
transform: translateY(0px);
}
}
<div style="height:40px;overflow:hidden">
<h1 class="anim1">Hello animation 1</h1>
<h1 class="anim2">Hello animation 2</h1>
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 the following jsfiddle:
http://jsfiddle.net/wcZq7/
CSS:
.boxcontainer {
perspective: 1000;
}
/* flip the pane when hovered */
.boxcontainer.hover .boxcard {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.boxcontainer, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.boxcard {
transition: 0.6s;
-webkit-transition: 0.6s;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
After clicking the flip link once, I cannot click the links on the 'back' div, why is that?
translateZ fixes this:
.back {
transform: rotateY(180deg) translateZ(200px);
-webkit-transform: rotateY(180deg) translateZ(1px);
}
DEMO