Анимация двойного наведения - возможно ли это?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать анимацию CSS, в которой карточка открывается не с одной, а с двух сторон. Итак, есть центральная часть и две боковые «заслонки». Оба начнут сворачиваться над центральной частью.

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

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

1. С какого кода вы начали? Если вы можете написать свой HTML таким образом, чтобы теги для сторон были либо вложены в центр, либо шли после центра, тогда вы должны быть в состоянии написать правила CSS, которые нацелены на стороны при наведении курсора мыши на центр.

2. Если я правильно понял желаемый регистр, когда пользователь нажимает на главный объект, вы должны запустить .show (анимировать) для левого и правого, 2 раза.

3. Возможно ли это? ДА. Как? Хороший вопрос! Существуют различные подходы. Что вы уже пробовали?

4. @IvanRubinson я пробовал с hoover. Я могу получить это так, как будто я открываю книгу или карточку, поэтому открывается левая сторона. Часть, которую мне нужно попробовать сейчас, — это открыть обе стороны одновременно, или я должен щелкнуть 2 раза, чтобы открыть одну сторону за раз.

5. Покажите нам свой код @ray55nl

Ответ №1:

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

 * { margin: 0; padding: 0; }

.content {
    background-color: aquamarine;
    width: 150px;
    height: 220px;
    margin: 50px auto 0 auto;
    perspective: 2000px;
    cursor: pointer;
}

.left, .right {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: aqua;
}

.left {
    transform-origin: left;
    transition: 1.5s;
}

.right {
    transform-origin: right;
    transition: .5s;
}

.content:hover .left {
    transform: rotateY(-125deg);
    transition: .5s;
}

.content:hover .right {
    transform: rotateY(125deg);
    transition: 1.5s;
}

 <div class="content">
    <div class="right"></div>
    <div class="left"></div>
</div>

Ответ №2:

Как я и представлял, вы запускаете als 1. Затем вы нажимаете на нее, и стороны раскрываются каждая в одну сторону, и получается что-то вроде 2. мне нравится видеть, как вы открываете книгу, но не только с одной стороны, а с обеих

Ответ №3:

@Vektor

Это было именно то, что я искал, спасибо!

Мой конечный результат:

  * {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    background: url(achtergrond omtrek.png);
    width: 1850px;
    height: 929px;
    margin-left: auto;
    margin-right: auto;
}

.content {
    position: absolute;
    left: 35%;
    background: url(center.png);
    width: 563px;
    height: 825px;
    margin: 50px auto 0 auto;
    perspective: 2000px;
    cursor: pointer;
}

.left,
.right {
    position: absolute;
    width: 531px;
    height: 721px;
    top: 5%;
    vertical-align: middle;
    background-color: aqua;
}

.left {
    transform-origin: left;
    transition: 1.5s;
}

.right {
    transform-origin: right;
    margin-left: 30px;
    transition: .5s;
}

.content:hover .left {
    transform: rotateY(-180deg);
    background: url(left.png);
    transition: .5s;
}

.content:hover .right {
    transform: rotateY(180deg);
    background: url(right.png);
    transition: 1.5s;
}