Установите css rotateY без анимации - PullRequest
Новая
       43

Установите css rotateY без анимации

0 голосов
/ 11 июня 2018

Я делаю элемент html флипкарты, который при нажатии вращается вокруг оси Y.Эта часть работает достаточно хорошо, хотя кто-то заметил ошибку, из-за которой иногда содержимое на обратной стороне флипкарты зеркально отображалось вдоль оси y (я установил, что это происходит из-за того, что браузер задерживается обновлением SCORM ипропускает вращение у).Мое предлагаемое «решение» состоит в том, чтобы сбросить вращение у на 0, когда начальный «перевернутый» переход завершается.Проблема в том, что я не могу найти, как просто установить вращение у без перехода / анимации в это вращение. Я просто хотел бы установить вращение y немедленно, без какой-либо анимации.

Этот ответ ... CSS3 rotateY без примененных переходов ... говорит, что я не долженне использую переход, просто преобразовываю, но это именно то, что я делаю: 

$("#card"+element.attr('id')).css({ '-webkit-transform' : 'rotateY( 0deg)', '-moz-transform' : 'rotateY( 0deg)', '-o-transform' : 'rotateY( 0deg)', 'transform' : 'rotateY( 0deg)' });

Я также пробовал: 

$("#card"+element.attr('id')).css({ '-webkit-transform' : 'matrix(1,0,0,1,0,0)', '-moz-transform' : 'matrix(1,0,0,1,0,0)', '-o-transform' : 'matrix(1,0,0,1,0,0)', 'transform' : 'matrix(1,0,0,1,0,0)' });

В css определен переход:

.flipcard.flipped {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}

.back {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    padding: 30px;
}

.flipcard {
    box-shadow: 0px 0px 5px #888888;    
    transition: transform 3500ms ease;
    margin-bottom:15px;
    min-height:480px;
    overflow:hidden;
}

... так это также влияет на любое другое преобразование, добавленное к элементу?Честно говоря, я новичок в переходах CSS, поэтому я не уверен на 100%, как этот первоначальный флип-переход даже применяется.

Еще раз, любая помощь будет высоко оценена!

EDIT
Чтобы уточнить: я пытаюсь сбросить свойство rotateY с помощью функции setTimeout, которая запускается при первом нажатии элемента cardflip.Вот как это выглядит в данный момент: 

setTimeout(function(){
                        console.log("Rotation should reset to 0?");
                        $("#card"+element.parent().attr('id')).css({ '-webkit-transition-property' : 'none !important', '-moz-transition-property' : 'none !important', '-o-transition-property' : 'none !important', 'transition-property' : 'none !important' });
                        $("#card"+element.parent().attr('id')).css({ '-webkit-transform' : 'rotateY( 0deg)', '-moz-transform' : 'rotateY( 0deg)', '-o-transform' : 'rotateY( 0deg)', 'transform' : 'rotateY( 0deg)' });
                    }, 3600);

Задержка немного больше, чем анимация вращения.Проблема с этим решением состоит в том, что последующие «сальто» на других картах испортились (я предполагаю, потому что свойства перехода теперь установлены, чтобы не изменяться). Я бы просто хотел установить свойство rotateY щелкающей карты на 0, когда начальная анимация "щелчка" завершена, без анимации с новым значением. Конечно, это просто.

...