@olezhenka

Какое css свойство здесь не поддерживается, что у монетки нету краев?

Понравилась эта анимация вращения монетки - https://codepen.io/n0rmand0/pen/qVrMeG
Но почему-то в firefox не работают края монетки :(
Выглядит все вот так: UmMQm32frIc.jpg

Хотя в гугле с пк все норм.

С телефона в гугле все еще более странно - сначала краи показываются, но когда монетка повернулась уже на 180 градусов - краи исчезают

Мб кто-то подскажет что может не воркать воркать или неправильно? Просто этих краев просто напросто нет и сложно понять.
  • Вопрос задан
  • 1079 просмотров
Решения вопроса 1
5d27ce4011bce094653290.png
Проблема в этой строке, почему-то Crome и Firefox по разному этот поворот обрабатывают,
в результате в лисе элемент поворачивается так, что как бы "схлопывается" от наблюдателя.
Поставьте там 85%, сразу поймете, о чем говорю.
Как исправить - хз, нет особо времени ковыряться в этом странном поведении

5d27cf2a2e55a792446615.png

P.S. вообще, я бы такие "плюшки" подальше от рабочих проектов держал, они разве что на эксперименты годятся, чтобы подивиться мощностью css-трансформаций. Имхо.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
coys
@coys
font-style: vitalic;
Необходимо добавить свойство transform-style: preserve-3d; для класса .coin__edge, чтобы поворот граней рассчитывался правильно.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы