Как сделать необычную форму обратного звонка?

Question

[squirtazzer]

Здравствуйте. Я видел на некоторых сайтах подобное решение-нажимаешь на картинку она поворачивается другой стороной и там контактная форма, на оборотной стороне картинки. Не подскажите как реализовать подобное?или плагин или другое подобное необычное решение:?

Answer 1

[tyzberd]

https://desandro.github.io/3dtransforms/docs/card-...

Comments

[squirtazzer]

Супер.а как сделать чтобы эта карточка была картинкой??и чтобы с другой сторолны была контактная форма связи:?

[tyzberd]

поменять html и стили привязать к другим тегам, классам

[squirtazzer]

https://codepen.io/anon/pen/MrWyWK смотрите, все внес,а кнопки flip card не появилось как в примере.

[tyzberd]

может так будет понятно https://codepen.io/anon/pen/KQNPqx

[squirtazzer]

tyzberd, спасибо

[squirtazzer]

tyzberd, с сss разобрался.переименовал container в container2 ибо у меня видимо где то этот класс использовался уже.
а вот js не работает. я внес его сюда-ничего не поменялось

[tyzberd]

а вот js не работает.

добавьте закрывающие скобки в конец скрипта
});

[squirtazzer]

tyzberd, так они же есть

[squirtazzer]

tyzberd, о заработало) только почему то кнопки назад
и форма почему то без отступов(

подскажите пожалуйста как это поправить?

вот код который я вставил

<section class="container2">
<div class="card">
<div class="front card-item"><img src="https://motorr-dv.ru/wp-content/uploads/2018/02/%D0%B7%D0%B0%D0%BA%D0%B0.jpg" alt="" /></div>
<div class="back card-item">[contact-form-7 id="71" title="Вызов замерщика"]</div>
</div>
</section>

Вот css

.container2 { 
  width: 576px;
  height: 536px;
  position: relative;
  perspective: 800px;
}
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}
.card-item {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.card-item img {
  max-width:100%;
}

.card .back {
  background: #b9b9b9;
  transform: rotateY( 180deg );
}
.card.flipped {
  transform: rotateY( 180deg );
}


.title {
  position:relative;
	font-family: 'Muller';
  font-weight:bold;
  font-size: 25px;
  text-shadow: 0px 1px 2px rgba(255,255,255,.5);
  color: #444;
  text-align:center;
}




.back-icon {
  width:24px;
  fill:#fff;
  margin: 10px 0 0 10px;
}
.back-icon:hover {
  transform: scale(1.3);
  transition: all .5s;
}

Скажите где ошибка,я поправлю, и как добавить чтобы при наведении на картинку был пальчик. cursor pointer что то там...

[squirtazzer]

tyzberd, Добавляю код перед формой

<svg class="back-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 477.175 477.175" xml:space="preserve">
	<path d="M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225   c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z"/>
</svg>

сохраняю и он почему то из визуального редактора пропадает

[tyzberd]

и форма почему то без отступов(

родительскому блоку формы добавить padding, можно для back

Скажите где ошибка,я поправлю

наверно нет ошибки, просто стили для формы нужно добавить.

он почему то из визуального редактора пропадает

значит редактор вырезает.
Добавляйте картинкой, или другим способом добавления svg

[squirtazzer]

tyzberd, спасибо получилось)добавил картинкой и дал ей класс back icon. Отступы добавил. все заработало)

[squirtazzer]

tyzberd, в сафари(что в телефоне,что на маке) полный писец) картинка поворачивается, и просто лицевая сторона зеркалится.не знаете почему так?

[squirtazzer]

tyzberd, и еще, как можно сделать чтобы при отправке форме,картинка поворачивалась обратно?и не по кнопке назад(back-icon) картинка обратно поворачивалась, а при нажатии на картинку.то есть нажал повернулась обратной стороной, и нажал на нее снова, и она повернулась обратно,можно так сделать?

[tyzberd]

в сафари(что в телефоне,что на маке) полный писец) картинка поворачивается, и просто лицевая сторона зеркалится.не знаете почему так?

У меня нет возможности в сафари посмотреть.

чтобы при отправке форме,картинка поворачивалась обратно

смотря как форму отправляете. нужно вызвать
$('.card').toggleClass('flipped');