Сбои анимации при преобразовании CSS - PullRequest
Новая
       19

Сбои анимации при преобразовании CSS

0 голосов
/ 28 октября 2018

У меня есть проблема, но я не могу найти, где я допустил ошибку ...

Я сделал небольшую анимацию, используя преобразование в 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>

Ответы [ 3 ]

0 голосов
/ 28 октября 2018

Это связано с 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>
0 голосов
/ 28 октября 2018

Удалить перспективу из всех преобразований и поместить ее в контейнер (не при наведении).

"При определении свойства перспективы для элемента, элементы 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>
0 голосов
/ 28 октября 2018

Удалить все ваши перспективы из: hover в css.Это будет работать. 

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

...