CSS转换动画崩溃
[英]CSS transform animation crashes
问题描述
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. 如您在代码中所见，我使用CSS中的transform制作了一个小动画。
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>
3 个解决方案
解决方案1
1 已采纳 2018-10-28 19:19:36
It has to do with the perspective . 它与perspective 。 You have to set it on the parent (so perspective: 1000px; inside .container ) and remove the others. 您必须将其设置在父级上（因此， perspective: 1000px; .container perspective: 1000px;在.container ），然后删除其他的。
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..) （当它移动时，有时元素实际上从鼠标的位置下方移出，然后:hover规则不适用，并且转换反向，在鼠标触发下返回:hover ，依此类推。）
*{ 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>
解决方案2
0 2018-10-28 19:19:04
Remove all your perspective out of the :hover in css. 从CSS的：hover中删除所有透视图。 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. 在这里，我将所有css嵌套在一起以使跟踪更容易一些。编辑：我的意思是SCSS文件而不是CSS。
解决方案3
0 2018-10-28 19:30:40
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." “定义元素的透视图属性时，是CHILD元素获得透视图，而不是元素本身。”
In your case the parent element is ".container" since you're applying some transformations to ".carre" too. 在您的情况下，父元素是“ .container”，因为您也要对“ .carre”进行一些转换。
*{ 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.