Как сделать двухстороннюю кнопку?
Вот простой и доступный гайд 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... - примитивная демка на кодпене.
Вот простой и доступный гайд 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... - примитивная демка на кодпене.