Поворот изображения (трансформация)

@Петр91 · Регистрация: 17.05.2010

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

Всем привет! Необходимо повернуть изображение... как бы так объяснить. Игра 100 к 1, там есть таблички с ответами. С одной стороны "рубашка" с другой ответ. Вуаля, она поворачивается огаляя нам свою сторону с ответом. Как реализовать такое вращение?

@Forastero · 15.07.2013, 15:30

Сделаю набросок. Думаю, Вы уловите идею.) Комментарии прилагаю.

HTML5
1
2
3
4
5
6
<div class="wrap">
    <div class="panel">
        <div class="front">Сорона 1</div>
        <div class="back">Сторона с ответом</div>
    </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
29
30
31
32
33
34
35
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/*Блок обертка*/
.wrap {
    width: 400px;
    height: 400px;
}
 
/*Стили для панели*/
.panel{
    position: absolute;
    width: 100%;
    height: 100%;
}
 
/*Стили для обеих сторон*/
.panel div {
    position: absolute;
    width: 400px;
    height: 400px;
}
 
/*Одну из сторон поворачиваем на 180 градусов. То есть отворачиваем.*/
.back {
    -webkit-transform: rotateY(180deg);
}
 
/*Поворачиваем всю панель конутрукцию*/
.panel {
    -webkit-transform: rotateY(180deg);
}

@Петр91 · 16.07.2013, 03:09 **[ТС]**

Фух, если честно не очень понятно, в вебе не особо компетентен) Идею так и не понял, надо же либо циклом с поворотом делать, или подменой. А тут 4 разных div. в чем суть то....

@Ruisenor · 16.07.2013, 08:11

вам просто основу дали нужно доработать - так сказать воплотить в жизнь.

@Forastero · 16.07.2013, 08:53

Петр91, Ruisenor, в общем, смотрите что вышло.

При клике по кнопке карта поворачивается.

HTML5
1
2
3
4
5
  <div class="wrap">
    <div class="front"><img src="//placehold.it/300x300&text=Front"></div>
    <div class="back"><img src="//placehold.it/300x300&text=Back"></div>
  </div>
  <button>Жми меня</button>

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
.wrap {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-perspective: 2000px;
  -webkit-perspective-origin: 50% 50%;
  transition: all 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg);
  margin-bottom: 20px;
}
 
.front,
.back {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #ccc;
  -webkit-backface-visibility: hidden;
}
 
.back {
  -webkit-transform: rotateY(180deg);
}

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
  $('button').click(function() {
    var wrap = $('.wrap');
    if($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
      $(wrap).css({'-webkit-transform':'rotateY(180deg)'});
    } else {
      $(wrap).css({'-webkit-transform':'rotateY(0deg)'});
    }
  });
});

Песочница: http://jsbin.com/okokag/3/

@Ruisenor · 16.07.2013, 09:35

нужно еще адаптировать этот код под оперу и мазилу - потому как не работает механизм в этих браузерах. В хроме работает. Нужно дописать определенные моменты для оперы и мазилы. В Сафари и Интернет Эксплорере не проверел .

@Alorian · 16.07.2013, 10:01

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

нужно еще адаптировать этот код под оперу и мазилу - потому как не работает механизм в этих браузерах

Все работает:
http://caniuse.com/transforms2d
http://htmlbook.ru/css/transform

http://caniuse.com/css-transitions

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

Нужно дописать определенные моменты для оперы и мазилы

Если вы про код Forastero, то он может не работать, да. Невнимательно прочитал.

@Forastero · 16.07.2013, 10:06

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

@Петр91 · 16.07.2013, 10:47 **[ТС]**

Ееее, спасибо большое)

Добавлено через 32 минуты
Только я все равно не пойму... я сохранил страницу локально, и отредактировал код. Все упирается в одну строчку, без нее не работает поворот
<script src="./JS Bin_files/jquery.min.js"></script>
Что это за скрипт?

@Ruisenor · 16.07.2013, 13:03

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

Я не стал заморачиваться и прописывать для каждого браузера. То бишь прописал лишь вебкитовские.

именно это я и имел ввиду префиксы

Добавлено через 1 минуту
Петр91, это путь прописанный к место где храниться джава скрипт
на его место пропишите свой путь к файлу

Добавлено через 1 час 2 минуты
заработало ?

@Петр91 · 17.07.2013, 02:13 **[ТС]**

я понимаю что это путь к скрипту, у меня все работает) Я просто хотел узнать, что это за скрипт такой что он делает?
1) Основной код, мы создаем два div блока.
2) Создаем ccs классы, где webkit - как я понял ccs transforms
3) скрипт где по нажатию кнопки, происходит вращение.
Каким боком тут jquery.min.js где вызывается и что делает?

@Lovrentiy · 17.07.2013, 09:03

Сообщение от Петр91

Ееее, спасибо большое)

Добавлено через 32 минуты
Только я все равно не пойму... я сохранил страницу локально, и отредактировал код. Все упирается в одну строчку, без нее не работает поворот
<script src="./JS Bin_files/jquery.min.js"></script>
Что это за скрипт?

создаете файл jquery.min.js, открываете его в режиме редактирования и вставляете код представленный выше:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function() {
  $('button').click(function() {
    var wrap = $('.wrap');
    if($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
      $(wrap).css({'-webkit-transform':'rotateY(180deg)'});
    } else {
      $(wrap).css({'-webkit-transform':'rotateY(0deg)'});
    }
  });
});

в <head>-е прописываете путь до скрипта и вуаля

@Ruisenor · 17.07.2013, 09:11

1 два блоск это символизируют две разные стороны - нашего предполагаемого листа.
2 webkit это префикс для браузера например этот для Хрома , а есть префиксы для Мозилы и для оперы и тд
3 jquery.min.js вкладывается в корневую папку и прописывается к нему путь в <head> и выполняет свою часть работы

@Петр91 · 17.07.2013, 09:59 **[ТС]**

Два вопроса..
1) Как сделать так, чтобы при нажатии не на кнопку, а на картинку происходило вращение. Да и потом, в представленном выше скрипте, функция работает с 'button', а если мне необходимо создать другую кнопку? как к первой обратиться. Предполагал что по id="", но ничего не получается...
2) я зашел вот сюда http://jsbin.com/okokag/3, сохранил страницу локально. отредактировал код и вот что получилось

HTML5
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./res/jquery.min.js"></script>
<meta charset="utf-8">
<title>Wrap</title>
 
<style type="text/css">
.wrap {
  position: relative;
  width: 300px;
  height: 300px;
  -webkit-perspective: 2000px;
  -webkit-perspective-origin: 50% 50%;
  transition: all 1s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg);
  margin-bottom: 20px;
}
 
 
.front,
.back {
  position: absolute;
  width: 300px;
  height: 300px;
  background: #ccc;
  -webkit-backface-visibility: hidden;
}
 
.back {
  -webkit-transform: rotateX(180deg);
}
</style>
</head>
<body>
  <div class="wrap" style="-webkit-transform: rotateX(180deg);">
    <div class="front" style="background-image: url(res/300x300&text=Front)"><p style="font-size:25px">TEST</p></div>
    <div class="back"><img id="first" src="./res/300x300&text=Back.jpg"></div>
  </div>
  <button>Жми меня</button>
<script>
    $(function () {
        $('button').click(function () {
            var wrap = $('.wrap');
            if ($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(wrap).css({ '-webkit-transform': 'rotateX(180deg)' });
            } else {
                $(wrap).css({ '-webkit-transform': 'rotateX(0deg)' });
            }
        });
    });
</script>
</body>
</html>

со страницей сохранились два скрипта, один из которых я удалил! Второй jquery.min.js содержит огромное количество какого то кода. И я просто не вижу, где данная программа обращается скрипту jquery.min.js, но без него ничего не работает, вот что мне не понятно!

@Ruisenor · 17.07.2013, 16:53

Попробуйте поменять слово button на название изоображения

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
script>
    $(function () {
        $('button').click(function () {  < Видите здесь слово кнопка на англиском нужно поменять на изображение нужное >
            var wrap = $('.wrap');
            if ($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(wrap).css({ '-webkit-transform': 'rotateX(180deg)' });
            } else {
                $(wrap).css({ '-webkit-transform': 'rotateX(0deg)' });
            }
        });
    });
</script>

Добавлено через 9 минут
заместо button поставь img

Добавлено через 43 минуты
проверил если поменяешь на изображение работает

@Петр91 · 18.07.2013, 02:19 **[ТС]**

Я конечно извиняюсь, но вы вообще меня слушать не хотите!!!! ну или я что то недопонимаю)

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

заместо button поставь img

А если у меня несколько картинок! если несколько таких карт! я привязываю функцию на имя img и по нажатию на одну из картинок(кнопок) поворачиваются все! у каждой картинки или изображения должен быть присвоен индификатор, свое имя, что бы обращатся к данному элементу...
P.S.Про какой то не понятный скрипт так и не объяснили...

@Ruisenor · 18.07.2013, 08:46

дело в том что срабатывает скрипт только если вы наведете на картинку и осуществите клик на ней - поэтому будет поворачиваться только одна картинка - вы же не сможете кликать одновременно на все картинки. Просто найдите учебники по джава и читайте ищите.

@Петр91 · 18.07.2013, 10:45 **[ТС]**

Не так все просто. Мне же еще текст нужно помещать на картинку. Поэтому я делаю картинку фоном

HTML5
1
<div class="front" style="background-image: url(Front)"><p style="font-size:25px">Текст</p>

У меня нету объекта img. Да и если я пишу

HTML5
1
2
3
4
5
6
7
8
9
<div class="wrap" style="-webkit-transform: rotateY(180deg);">
    <div class="front"><img src="./JS Bin_files/300x300&text=Front.jpg"></div>
    <div class="back"><img src="./JS Bin_files/300x300&text=Back.jpg"></div>
  </div>
 
   <div class="wrap" style="-webkit-transform: rotateY(180deg);">
    <div class="front"><img src="./JS Bin_files/300x300&text=Front.jpg"></div>
    <div class="back"><img src="./JS Bin_files/300x300&text=Back.jpg"></div>
  </div>

Вот две карты, при нажатии на любую из них, поворачиваются обе.
вот скрипт

JavaScript
1
2
3
4
5
6
7
8
9
10
11
<script>
    $(function () {
        $('img').click(function () {
            var wrap = $('.wrap');
            if ($(wrap).css('-webkit-transform') == 'matrix(1, 0, 0, 1, 0, 0)') {
                $(wrap).css({ '-webkit-transform': 'rotateY(180deg)' });
            } else {
                $(wrap).css({ '-webkit-transform': 'rotateY(0deg)' });
            }
        });
    });

А про учебник, он то тут причем? я просто не вижу, где в коде вызывается скрипт <script src="./res/jquery.min.js"></script>, почему без него ничего не работает, ведь вы о нем даже не упоминали...

@Lovrentiy · 20.07.2013, 10:04

Уважаемый, смените "тон". Выше Вам было сказано, что подгружается скрипт в <head>-е, а учебник Вам советуют почитать, что бы иметь представление о работе кода, в частности узнать что такое функции и переменные, а так же какие функции уже присутствуют в соответствующей библиотеке.

@Dzvene · 27.09.2013, 14:49

Подскажите пожалуйста, а как сделать такой-же поворот, но при наведении курсора мыши?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Петр91 5 / 5 / 1 Регистрация: 17.05.2010 Сообщений: 108

	Поворот изображения (трансформация) 15.07.2013, 05:51. Показов 10728. Ответов 19 Метки нет (Все метки) Всем привет! Необходимо повернуть изображение... как бы так объяснить. Игра 100 к 1, там есть таблички с ответами. С одной стороны "рубашка" с другой ответ. Вуаля, она поворачивается огаляя нам свою сторону с ответом. Как реализовать такое вращение? 0

@Петр91 5 / 5 / 1 Регистрация: 17.05.2010 Сообщений: 108
	16.07.2013, 03:09 [ТС]
	Фух, если честно не очень понятно, в вебе не особо компетентен) Идею так и не понял, надо же либо циклом с поворотом делать, или подменой. А тут 4 разных div. в чем суть то.... 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	16.07.2013, 08:11
	вам просто основу дали нужно доработать - так сказать воплотить в жизнь. 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	16.07.2013, 09:35
	нужно еще адаптировать этот код под оперу и мазилу - потому как не работает механизм в этих браузерах. В хроме работает. Нужно дописать определенные моменты для оперы и мазилы. В Сафари и Интернет Эксплорере не проверел . 0

@Forastero 562 / 339 / 87 Регистрация: 15.05.2013 Сообщений: 812 Записей в блоге: 1
	16.07.2013, 10:06
	Alorian, он имел в виду префиксы. Я не стал заморачиваться и прописывать для каждого браузера. То бишь прописал лишь вебкитовские. 0

@Петр91 5 / 5 / 1 Регистрация: 17.05.2010 Сообщений: 108
	16.07.2013, 10:47 [ТС]
	Ееее, спасибо большое) Добавлено через 32 минуты Только я все равно не пойму... я сохранил страницу локально, и отредактировал код. Все упирается в одну строчку, без нее не работает поворот <script src="./JS Bin_files/jquery.min.js"></script> Что это за скрипт? 0

@Петр91 5 / 5 / 1 Регистрация: 17.05.2010 Сообщений: 108
	17.07.2013, 02:13 [ТС]
	я понимаю что это путь к скрипту, у меня все работает) Я просто хотел узнать, что это за скрипт такой что он делает? 1) Основной код, мы создаем два div блока. 2) Создаем ccs классы, где webkit - как я понял ccs transforms 3) скрипт где по нажатию кнопки, происходит вращение. Каким боком тут jquery.min.js где вызывается и что делает? 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	17.07.2013, 09:11
	1 два блоск это символизируют две разные стороны - нашего предполагаемого листа. 2 webkit это префикс для браузера например этот для Хрома , а есть префиксы для Мозилы и для оперы и тд 3 jquery.min.js вкладывается в корневую папку и прописывается к нему путь в <head> и выполняет свою часть работы 0

@Ruisenor 130 / 130 / 1 Регистрация: 29.05.2013 Сообщений: 612
	18.07.2013, 08:46
	дело в том что срабатывает скрипт только если вы наведете на картинку и осуществите клик на ней - поэтому будет поворачиваться только одна картинка - вы же не сможете кликать одновременно на все картинки. Просто найдите учебники по джава и читайте ищите. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	20.07.2013, 10:04
	Уважаемый, смените "тон". Выше Вам было сказано, что подгружается скрипт в <head>-е, а учебник Вам советуют почитать, что бы иметь представление о работе кода, в частности узнать что такое функции и переменные, а так же какие функции уже присутствуют в соответствующей библиотеке. 0

@Dzvene 11 / 11 / 5 Регистрация: 27.09.2013 Сообщений: 278
	27.09.2013, 14:49
	Подскажите пожалуйста, а как сделать такой-же поворот, но при наведении курсора мыши? 0