CSS 变换动画崩溃

Question

我有一个问题，但找不到哪里出错了...

正如您在代码中看到的那样，我在 CSS 中使用变换制作了一个小动画。
但有时当我将鼠标悬停时，动画变得疯狂。当我从左下角悬停到右下角时，我感觉经常出现这种情况。
奇迹是你能看到它。

你能帮我修好吗？

    *{
        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>

Answer 1

从 css 中的 :hover 移除所有视角。会成功的。

.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;
   }
}

在这里，我将所有 css 嵌套在一起，以便更轻松地跟踪编辑：我的意思是 SCSS 文件不是 CSS.

Answer 2

与perspective有关。您必须在父项上设置它（因此 perspective: 1000px; 在 .container 内）并删除其他项。

它可能仍然 'flicker' 有点，因为它正在转换和计算您的鼠标是否仍在元素上悬停。（当它移动时，元素有时实际上会从鼠标位置下方移出，然后 :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>

Answer 3

从所有变换中移除透视并将其放置在容器上（而不是悬停）。

"When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself."

在您的例子中，父元素是“.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>

CSS 变换动画崩溃

CSS transform animation crashes

css

css-transforms

css-animations