Как добавить зум и перевернуть изображение с помощью CSS / JQuery

Question

Как добавить зум и перевернуть изображение с помощью CSS / JQuery

0

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

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

Может кто-нибудь, пожалуйста, помогите мне с выходом, используя мой код.

вот что я пробовал:

HTML

  <div class="flip">
<div class = 'card'>
        <img src="http://cdn.ndtv.com/tech/images/doodle_for_google_2013.jpg" class="zoom_img" />
</div>
    </div>

CSS

.zoom_img {
    height: 250px;
    width: 250px;
    /* -moz-transition: -moz-transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
    -o-transition: -o-transform 0.1s ease-in; */
    -webkit-transition: -webkit-transform 0.5s ease-in;
    -o-transition: -webkit-transform 0.5s ease-in;
}
.zoom_img_press {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.flip {
    -webkit-perspective: 800;
    width: 400px;
    height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card .flipped {
    -webkit-transform: rotatex(-180deg);
}
.flip .card {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: 0.5s;
}

Javascript

$(document).ready(function() {

        $('.flip').click(function(){
            $(this).find('.zoom_img').addClass('zoom_img_press').mouseleave(function(){
                $(this).removeClass('zoom_img_press');
            });
        });
$(this).find('.zoom_img').addClass('flipped').mouseleave(function(){
                $(this).removeClass('flipped');
            });
       });

    });

демонстрация

user1853128 14 нояб. 2013, в 11:52

Источник

0

Вы не используете классы для флип-переходов.
jfriend00 14 нояб. 2013, в 10:23
0

Я знаю ... кроме щелчка, я даже не уверен, нужен ли jQuery. Но чтобы узнать о сальто и тому подобное ... проверьте эту страницу - css3.bradshawenterprises.com/flip
Dan Goodspeed 14 нояб. 2013, в 10:31

Теги:

javascript

jquery

css

html5

css3

2 ответа

Ещё вопросы

Вы не используете классы для флип-переходов.
Я знаю ... кроме щелчка, я даже не уверен, нужен ли jQuery. Но чтобы узнать о сальто и тому подобное ... проверьте эту страницу - css3.bradshawenterprises.com/flip

super · Answer 1 · 2013-11-14T08-07-00.000Z

Попробуйте это, я думаю, это поможет вам..

Класс с множественным преобразованием.

.zoom-flipper{
    -moz-transform: scale(2.2) rotatex(-180deg);
    -webkit-transform: scale(2.2) rotatex(-180deg);
    -o-transform: scale(2.2) rotatex(-180deg);
    transform: scale(2.2) rotatex(-180deg);    
}

Соответствующий сценарий:

$('.flip').click(function(){
    $(this).find('.zoom_img').addClass('zoom-flipper').mouseleave(function(){
        $(this).removeClass('zoom-flipper');
    });
});

Вот Demo

J2D8T · Answer 2 · 2013-11-14T09-10-00.000Z

Создайте две отдельные функции JavaScript, затем напишите код jQuery, чтобы манипулировать css для изображения внутри функций. Пример кода манипуляции JQuery css:

 $(".className").css({"background-color":"black","font-size":"12px"});

Вы можете установить любое свойство css в фигурные скобки.

Затем вы можете вызвать функции JavaScript в элементах событий DOM. Таким образом, функция масштабирования будет вызываться с событием onClick, и функция flip будет вызываться в событии onMouseOut.