Как записать в Jquery следующее

@triatri3 · Регистрация: 16.11.2016

Студворк — интернет-сервис помощи студентам

При клике надо чтобы происходило это, но я не знаю как это прописать в Jquery

CSS
1
2
3
4
5
6
.page:hover .front{
  transform: rotateY(180deg);
}
.page:hover .back { 
  transform: rotateY(360deg); 
}

@mrtoxas · 08.07.2019, 13:06

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$('.page').hover(function() {
    $(this).find('.front').css('transform', 'rotateY(180deg)')
  }, function() {
    $(this).find('.front').css('transform', 'rotateY(0)')
  }
);
/* или */
$('.page').mouseover(function(){
  $(this).find('.front').css('transform', 'rotateY(180deg)')
})
$('.page').mouseleave(function(){
  $(this).find('.front').css('transform', 'rotateY(0)')
})

Сообщение от triatri3

При клике

JavaScript
1
2
3
$('.page .front').click(function(){
  $(this).css('transform', 'rotateY(180deg)')
})

@triatri3 · 11.07.2019, 08:14 **[ТС]**

Теперь возник логический вопрос: Как сделать эффект переворачивающейся 3d карточки? То есть чтобы при нажатии блок показывал свою заднюю сторону? Я так делал на css ( https://codepen.io/triatri3/pen/qQomYY ) , прописал ведь тот же поворот на jquery на 180 градусов по оси Y, но эффект другой ( https://codepen.io/triatri3/pen/PryvbJ ). В чём дело? Как исправить?

HTML5
1
2
3
4
5
6
7
8
<div class="card first">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>
<div class="card second">
  <div class="front"><span>Front</span></div>
  <div class="back"><span>Back</span></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.card {
  position: absolute;
  width: 120px; 
  height: 150px;
  margin-left: calc(50% - 60px);
  transition: .5s;  /* Это можно удалить */
}
.first {
  margin-left: calc(50% - 60px);
  z-index: 10;
}
.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front { 
  background-color: #66ccff; 
}
.back { 
  background-color: #dd8800; 
  transform: rotateY(180deg); 
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    var i=0;
    $(".first").click(function(){
        if (i==0){
            $(".first").css({marginLeft: "calc(50% - 120px)"});  // фигурные скобки !!!
            $(".second").css("margin-left","50%");
            $('.first').css( {'transform': 'rotateY(180deg)'});
            i++;
        }
        else {
            $(".first").css({marginLeft: "calc(50% - 60px)"});  // фигурные скобки !!!
            $(".second").css("margin-left","calc(50% - 60px)");
            $('.first').css( {'transform': 'rotateY(360deg)'});
            i--;
        }
    })
})

@triatri3 · 11.07.2019, 21:39 **[ТС]**

Вроде как нашёл решение, через добавление класса, в котором будет прописанно transform: scale(1, -1); (отзеркаливание по горизонтали). Всё прописал, но не работает. Что не так? Как исправить?

HTML5
1
2
3
4
<div class="page first">
        <div id="New">New</div>
        <div id="York">York</div>
    </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.first {
  margin-left: calc(50% - 37vh);
  z-index: 50;
  background-image: url('mediafiles/Title.jpg');
  background-size: 100% 100%;
}
.firstback {
  margin-left: calc(50% - 37vh);
  z-index: 50;
  background-image: url('mediafiles/second.jpg');
  background-size: 200% 100%;
  transform: scale(-1, 1);
}
#New {
  position: absolute;
  font-family: 'DM Serif Display', serif;
  font-size: 20vh;
  color: white;
  right: 2vh;
}
#York {
  position: absolute;
  font-family: 'DM Serif Display', serif;
  font-size: 17vh;
  color: white;
  right: 0vh;
  top: 12vh;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function() {
    var i=0;
    $(".first").click(function(){
        if (i==0){
            $(".first").css({marginLeft: "calc(50% - 74vh)"});
            $(".second").css({marginLeft: "50%"});
            $('.first').css( {'transform': 'rotateY(180deg)'});
            $('.first').addClass("firstback");
            i++;
        }
        else {
            $(".first").css({marginLeft: "calc(50% - 37vh)"});
            $(".second").css({marginLeft: "calc(50% - 37vh)"});
            $('.first').css( {'transform': 'rotateY(360deg)'});
            $('.first').removeClass("firstback");
            i--;
        }
    });
})

@Mr_Sergo · 13.07.2019, 22:25

Сообщение от triatri3

Как исправить?

Может так -> https://codepen.io/Mr_Sergo/pen/YobWgW ?

HTML5
1
2
3
4
<div class="card">
    <div class="New">New</div>
    <div class="York">York</div>
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
$('.card').click(function(){
    if($('.New').attr('style') && $('.New').attr('style').match('180')){
        $('.New').css( {'transform': 'rotateY(360deg)'});
        $('.York').css( {'transform': 'rotateY(180deg)'});
    }
    else{
        $('.New').css( {'transform': 'rotateY(180deg)'});
        $('.York').css( {'transform': 'rotateY(360deg)'});
    }
});

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.card {
    position: relative;
    width: 100px;
    height: 100px;
    font-family: 'DM Serif Display', serif;
    cursor: pointer;
}
 
.New, .York {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform 1s;
    backface-visibility:hidden;
}
 
.New { 
    background-color: #66ccff; 
}
 
.York { 
    background-color: #dd8800; 
    transform: rotateY(180deg); 
}

@triatri3 · 14.07.2019, 17:55 **[ТС]**

Сообщение от Mr_Sergo

if($('.New').attr('style') && $('.New').attr('style').match('180')){

Не подскажите что значит эта строка? Что эта за условие такое? Если .attr('style') существует? А что после? Что такое .match('180')?

@Mr_Sergo · 14.07.2019, 18:37

Сообщение от triatri3

Что эта за условие такое?

Примерно тоже что вы делали с i++

Сообщение от triatri3

Что такое .match('180')?

Если вывести в консоль текущий атрибут style до его создания то вы получите undefined при первом клике

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.card').click(function(){
    console.log($('.New').attr('style'));  // undefined
    if($('.New').attr('style') && $('.New').attr('style').match('180')){
        $('.New').css( {'transform': 'rotateY(360deg)'});
        $('.York').css( {'transform': 'rotateY(180deg)'});
    }
    else{
        $('.New').css( {'transform': 'rotateY(180deg)'});
        $('.York').css( {'transform': 'rotateY(360deg)'});
    }
});

и match выдаст ошибку, а далее по коду ничего не будет работать. match ищет совпадения в строке -> MDN

При последующих кликах вы получите строку вида
transform: rotateY(180deg);
или
transform: rotateY(360deg);

match ищет совпадение 180 и если оно есть (.New повернут на 180 гр.) значит .New поворачиваем на 360, в противном случае наоборот.

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

Как записать в Jquery следующее

Решение

Решение