Переверните div с двух сторон HTML - PullRequest
Новая
       3

Переверните div с двух сторон HTML

4 голосов
/ 30 января 2012

У меня есть форма входа на сайт, который я сейчас создаю, и у меня также есть форма регистрации. Я хотел бы добавить к нему какую-нибудь причудливую анимацию, повернув div в другую сторону при нажатии на ссылку «Зарегистрироваться». Я хочу, чтобы форма входа была на лицевой стороне, а форма регистрации - на обратной. Я бы предпочел не использовать JavaScript, но при необходимости я буду.

Спасибо за любые возможные ответы!

Ответы [ 5 ]

17 голосов
/ 30 января 2012

Вы можете сделать анимацию, используя CSS transition и transform: rotateY() без Javascript, кроме запуска анимации путем добавления класса.

Демо: http://jsfiddle.net/ThinkingStiff/9UMFg/

CSS: 

.flip {
    backface-visibility: hidden;
    border: 1px solid black;
    height: 150px;
    position: absolute;
    transform-origin: 50% 50% 0px;
    transition: all 3s;
    width: 300px;    
}

#side-1 {
    transform: rotateY( 0deg );
}

#side-2 {
    transform: rotateY( 180deg );   
}

.flip-side-1 {    
    transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform: rotateY( 180deg ) !important;
}

HTML: 

<form id="side-1" class="flip">
    <div>login</div>
    <input id="username" placeholder="enter username" />
    <input id="password" placeholder="enter password" />
    <a id="login" href="#">login</a>
    <a id="signup" href="#">sign up</a>
</form>
<form id="side-2" class="flip">
    <div>signup</div>
    <input id="new-username" placeholder="enter username" />
    <input id="new-password" placeholder="enter password" />
    <input id="new-re-password" placeholder="re-enter password" />
    <a id="create" href="#">create</a>
</form>

Сценарий: 

document.getElementById( 'signup' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

}, false );
2 голосов
/ 30 января 2012

У меня нет времени на написание какого-либо кода прямо сейчас, но некоторые указатели, которые могут помочь;

1) Вам нужно будет использовать JavaScript в сочетании с CSS и, возможно, такую ​​инфраструктуру, как jQuery,Нет смысла заново изобретать колесо, в jQuery уже встроены отличные анимационные материалы.

2) Разбейте анимацию на этапы того, что происходит на самом деле.Примерно так, тень появляется, создавая впечатление, что форма поднялась со страницы, контент исчезает, ширина формы анимируется до 0, затем происходит обратный процесс с новым содержимым.

3) Есть много отличныхЭффекты манипулирования DOM уже есть, ищите классное переключение контента jquery и т. Д., Вы найдете много.

1 голос
/ 27 ноября 2013

Я сделал флип-меню, которое вы, возможно, могли бы использовать, при первой загрузке у него возникли некоторые затруднения, но я уверен, что это что-то незначительное ..

Визит jsfiddle

CSS: 

.switch-selection
{
display: block;
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
width: 130px;
height: 22px;
background: #fbfbfb;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
-moz-border-radius: 3px; /* Firefox */
-webkit-border-radius: 3px; /* Safari, Chrome */
-khtml-border-radius: 3px; /* KHTML */
border-radius: 3px; /* CSS3 */
}
0 голосов
/ 30 марта 2016

Решение для работы во всех браузерах см. здесь .Принцип есть.- поместите один div на другой.-Вращайте на div, чтобы он смотрел назад.- и поверните оба элемента div при наведении курсора, чтобы эффект переворачивания страницы.

0 голосов
/ 30 января 2012

Единственный способ сделать анимацию, подобную описанной вами, - это манипулирование DOM. Существует не так много способов сделать это без использования JavaScript.

Используя чистый HTML, вы можете создать шаблон, идентичный для DIV A и B, а затем изменить POST между ними, однако это не сделает эффектную анимацию такой, какой вы хотите.

...