Я хочу создать флип-карту CSS, которая вращается в 3D при наведении курсора мыши. Похож на один из W3Schools. Я хочу, чтобы ссылка была на обратной стороне карточки.
Нет проблем с последней версией Chrome или Firefox. Однако в Safari доступна только правая часть ссылки.
[img]https:/ /i.stack.imgur.com/L3y5u.png[/img]
Пример кода: https://jsfiddle.net/poooow/oe3b0swq/
.flip-card { цвет фона: прозрачный; ширина: 150 пикселей; высота: 150 пикселей; перспектива: 1000 пикселей; } .flip-card-inner { положение: относительное; ширина: 100%; высота: 100%; выравнивание текста: по центру; переход: преобразование 0,6 с; стиль преобразования: сохранение-3d; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .flip-card:hover .flip-card-inner { преобразование: RotateY (180 градусов); } .перевернутая карта-лицевая сторона, .flip-card-back { позиция: абсолютная; ширина: 100%; высота: 100%; -webkit-backface-visibility: скрыто; обратная видимость: скрыта; } .flip-card-front { цвет фона: #408abf; белый цвет; } .flip-card-back { цвет фона: #66bf40; белый цвет; преобразование: RotateY (180 градусов); Наведите курсор на изображение ниже: Спереди Назад Эта ссылка не работает в Safari
