Как сделать двухстороннюю кнопку?

Question

[odd-look]

Я бы использовал свойство transform: rotate3d, но оно зеркалит текст. Мне надо, чтобы с двух сторон был разный текст.
Пример https://crazywinners.com/

Answer 1

[Nikolay Talanov]

Вот простой и доступный гайд davidwalsh.name/css-flip (и живой пример davidwalsh.name/demo/css-flip.php)
Если вы не можете в английский, то схема такова:
1) Создаете элемент, в которой кладете 2 элемента, один будет лицом, другой "задом". Лицо просто встает как есть, а задняя сторона ставится с помощью с помощью position: absolute; top: 0; left: 0;
Обоим элементам задается 100% длины и высоты, backface-visibility: hidden и transition: transform %time%s;
2) Задней стороне даем transform: rotateY(180deg);
3) Назначаем на :hover родителя переворот обоих элементов по оси Y на -180 градусов. То есть передняя сторона станет transform: rotateY(-180deg); а задняя 0deg
4) И в конце добавляем родительскому элементу perspective: %число% (например 1000) для создания эффекта объема.
codepen.io/suez/pen/696e4a5351f1bf1428cc9e0e17285b... - примитивная демка на кодпене.

Answer 2

[tuxx]

там как раз используется rotate3d. используется 2 блока с текстом. они вращаются по переменно на 90 градусов со скрытием и проявлением через display.