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

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

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

Я ничего не упомянул.

— user9277191 28.10.2018 20:23
css css-animations css-transforms
28.10.2018 18:33
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
1
569
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Удалите всю свою перспективу из: 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.

Вы не можете вкладывать такие классы в css. Это синтаксис препроцессора (scss, less и т. д.)

— Iulius 28.10.2018 20:57

Это действительно файл SCSS. Извините за недопонимание.

— Duy Nguyen 29.10.2018 00:36
28.10.2018 20:19
Ответ принят как подходящий

Это связано с 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>

Спасибо. Действительно, некоторое мерцание все еще есть. Думаю смогу исправить;)

— Pierre 28.10.2018 20:39

Вы можете установить правило :hover для родительского элемента, который не перемещается / не изменяется, как обертка.

— Philip 28.10.2018 20:41

Вы удалили мерцание, а также эффект перспективы. Перспектива должна быть добавлена ​​к родительскому контейнеру, и она повлияет на всех дочерних элементов одинаково.

— Iulius 28.10.2018 20:43

@lulius Я считаю, что всем элементам нужна одна и та же перспектива, поэтому нет необходимости в других объявлениях перспективы для дочерних элементов

— Philip 28.10.2018 20:45

@ Филипп Я не думаю, что ты меня понял. Да, всем элементам нужна была одна и та же перспектива, поэтому вы размещаете ее на родительском элементе (в его случае - на div ".container"). Если вы запустите свой фрагмент кода и его исходный фрагмент, вы увидите, что ваш не имеет перспективы.

— Iulius 28.10.2018 20:48

Ах, ты прав, я ошибся. Изменил свой ответ, спасибо!

— Philip 28.10.2018 20:51

Спасибо Филиппу и Люлиусу за продолжение. Я установил наведение на другой элемент, и он отлично работает, больше не мерцает :)

— Pierre 28.10.2018 21:40
28.10.2018 20:19

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

«При определении свойства перспективы для элемента вид в перспективе получают элементы 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>
28.10.2018 20:30

Другие вопросы по теме

Создание бесконечного цикла с последовательной анимацией CSS SVG
Каковы правила идентификатора @keyframes в CSS3?
Показать анимацию
Перезапуск анимации css при перемещении анимации в другой div
CSS-анимация ключевых кадров при мерцании краев
Начать анимацию CSS до того, как элемент станет видимым
Анимировать фон на основе элемента ширины
Плавная прокрутка анимации CSS?
Пользовательская анимация для модального окна начальной загрузки не работает при закрытии из-за атрибута отображения, добавленного при загрузке
Есть ли способ медленно добавлять буквы в текст с помощью css?

Похожие вопросы

Как поставить текст под каждую иконку шрифта?
Как выделить строку при нажатии ссылки
Подобрать элемент в соответствии с другим элементом
Положение значков спрайтов в CSS
Bootstrap: Toggler не отображает его содержимое
Как мне получить этот макет (используя CSS flexbox)?
Проблема переполнения встроенной шкалы времени Twitter в браузере на iPhone
.li зависать и раскрашивать .a и span
Почему не могу изменить стиль моих собственных значков svg
Как центрировать SearchBar с помощью одной кнопки в заголовке NativeBase