CSS 变换动画崩溃答案

【问题标题】：CSS transform animation crashesCSS 变换动画崩溃
【发布时间】：2018-11-19 17:35:02
【问题描述】：

我有一个问题，但找不到我犯错的地方...

正如您在代码中看到的那样，我使用 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>

【问题讨论】：

我什么都没提。

标签： css css-animations css-transforms

【解决方案1】：

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

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

【讨论】：

谢谢。确实还是有一些闪烁。我想我可以解决它；）
您可以将:hover 规则设置在不会移动/更改的父元素上，例如包装器。
您删除了闪烁和透视效果。必须在父容器上添加透视，它将以相同的方式影响所有子容器。
@lulius 我相信所有元素都需要相同的视角，因此不需要在子元素上声明其他视角
@Philip 我不认为你理解我。是的，所有元素都需要相同的视角，这就是为什么你把它放在父级上（在他的例子中是“.container”div）。如果你运行你的代码 sn-p 和他原来的代码，你会发现你的没有透视图。

【解决方案2】：

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

“在定义元素的透视属性时，获得透视图的是 CHILD 元素，而不是元素本身。”

在您的情况下，父元素是“.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>

【讨论】：

【解决方案3】：

从 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。

【讨论】：

你不能在css中嵌套这样的类。这是预处理器语法（scss、less 等）
确实是SCSS文件。很抱歉造成误解。