I have an issue but can't find where I made a mistake...
I made an little animation using transform in CSS as you can see on the code.
But sometimes when I hover the mouse the animation becomes crazy. I feel like it occurs often when I hover from bottom left to right.
Wonder is you can see it.
Can you help me fix it please ?
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: perspective(1000px) rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: perspective(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>It has to do with the perspective. You have to set it on the parent (so perspective: 1000px; inside .container) and remove the others.
It might still 'flicker' a bit since it's transforming and calculating if your mouse is still hovering the element. (When it moves, the elements actually move out from underneath the mouse's position sometimes and then the :hover rules don't apply and the transforms reverse, coming back under the mouse triggering :hover, and so on..)
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
} <div class="container">
<div class="carre">
<div class="carre__front"></div>
<div class="carre__tippy"></div>
</div>
<div class="description"><p>Information display</p></div>
</div>Remove perspective from all the transformations and place it on the container (not on hover).
"When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself."
In your case the parent element is ".container" since you're applying some transformations to ".carre" too.
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
background: #ccc;
}
.container{
width: 400px;
margin: 0 auto;
margin-top: 200px;
position: relative;
perspective: 1000px;
}
.carre{
float: right;
width: 200px;
height: 300px;
position: relative;
background-color: #63aace;
border: 3px solid #f9f9f9;
border-radius: 10px;
transform-style: preserve-3d;
transition: all ease 1s;
box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}
.carre__front{
position: absolute;
width: 180px;
height: 200px;
left: 7px;
top: 50px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: #c65d5d;
transform-style: preserve-3d;
transition: all ease 1s;
transform: scale(1);
opacity: .9;
}
.carre__tippy{
position: absolute;
width: 100px;
height: 60px;
left: 47px;
bottom: 70px;
border: 2px solid #f9f9f9;
border-radius: 10px;
background: rgba(255,255,255,.2);
transform-style: preserve-3d;
transition: all ease 1s;
opacity: .9;
}
.description{
position: absolute;
top: 100px;
left: 0px;
font-family: sans-serif;
color: #fff;
font-size: 16px;
opacity: .9;
text-transform: uppercase;
}
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0) translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
}
.carre:hover .carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
.carre:hover .carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
p{
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html lang="fr">
<head>
<!-- En-tête de la page -->
<meta charset="utf-8" />
<title>titre</title>
</head>
<body>
<div class="container">
<div class="carre">
<div class="carre__front">
</div>
<div class="carre__tippy">
</div>
</div>
<div class="description"><p>Information display</p></div>
</div>
</body>
</html>Remove all your perspective out of the :hover in css. It'll work.
.carre:hover{
transform: rotateX(30deg) rotateY(20deg) rotateZ(-20deg) translateX(0)
translateY(0) translateZ(100px);
box-shadow: -100px 100px 100px rgba(0,0,0,.3);
.carre__tippy{
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(120px);
box-shadow: -50px 50px 20px rgba(0,0,0,.3);
}
.carre__front{
transform: translateZ(50px);
box-shadow: -20px 20px 30px rgba(0,0,0,.3);
opacity: .7;
}
}
Here I nested all your css together for track keeping a little easier Edit: I meant SCSS file not CSS.
来源：https://stackoverflow.com/questions/53034301/css-transform-animation-crashes