Вращение изображения. Плавно на 360

[Slashtore]

Пока нигде не нашел как можно вращать изображение на 360 вокруг оси (именно по оси Y, а не вращение вправо или влево по Z). В управляемом изображении есть вращение CSS, но там на 180, один раз, и к тому же вначале изображение перевёрнуто! Кто знает где искать решение, поделитесь пожалуйста.

[igorweb]

В свойствах изображения HTML-исходник объекта перед тегом ставите код:

Код: Выделить всё

<style>#Image1:hover
{
    transition:all 1s ease;
        -moz-transition:all 1s ease;
        -webkit-transition:all 1s ease;
        -ms-transform-transition:all 1s ease;
        -o-transform-transition:all 1s ease;
    transform: rotateX(360deg);
        -moz-transform: rotateX(360deg);
        -ms-transform: rotateX(360deg);
        -webkit-transform: rotateX(360deg);
        -o-transform: rotateX(360deg);
}
</style>


Вместо #Image1 подставляете свой id объекта.

[Slashtore]

Громадное спасибо! Без ваших знаний точно не смог бы ничего сделать. Хочу повторить как здесь http://www.templatemonster.com/ru/demo/52064.html

[Gudwinn]

Если Вам при наведении нужен такой эффект, то в CSS анимации элемента (в свойствах картинки), в нижнем окошке выберите hover потом transform или transform -3D Поиграйтесь с настройками, я уверен что найдёте подходящий вариант.Посмотрел, в точности то что Вам нужно, это выбрать transform 3D поворот Y: 360 Вот и всё, скорость поворота можете тоже регулировать

[Slashtore]

И ваш вариант отлично работает! Спасибо. Еще маленький вопрос. Какой тригер нужно выбрать, чтобы запустить обратную анимацию при выводе курсора за пределы изображения? Т.е. было hover, а обратно?

[Gudwinn]

Источник цитаты Т.е. было hover, а обратно?

Вот эту штуку вставляете в особый стиль картинки:

-webkit-transition: all .5s linear;
-o-transition: all .5s linear;
transition: all .5s linear;


И всё как надо)))

[Slashtore]

Волшебник? Отлично всё работает! Спасибо ещё раз.

[Gudwinn]

Источник цитаты Волшебник?

А у нас тут все волшебники, Урфин Джусов пока не наблюдали))) Не за что, это мелочи, но хотел бы Вам сказать, что этот эффект не очень, можно использовать как второстепенный элемент, но не как на первом плане в примере шаблона. Лучше сделайте при наведении приподнятие вверх, и опускание вниз при убпрании курсора, гораздо стильней и элегантней. Но опять же, это моё субъективное мнение.

[Alex]

Источник цитаты Какой тригер нужно выбрать, чтобы запустить обратную анимацию при выводе курсора за пределы изображения? Т.е. было hover, а обратно?

Кажись По умолчанию (default)

[Alex]

Там вообще сложно нет и кодов лишних добавлять не надо.
Для hover вращение 360, для По умолчанию (default) градусы ставить не надо.

1001_.png

[anonimus]

весь процесс вправо и влево:

1


2


итог:
https://snap.ashampoo.com/uploads/2016-02-07/SrbBXrwf.mp4

Источник цитаты именно по оси Y, а не вращение вправо или влево

Точно так же делается по любой из осей, например по Y

1


2


итог:
https://snap.ashampoo.com/uploads/2016-02-07/62FEINIP.mp4

Отправлено спустя 2 минуты 54 секунды:

Источник цитаты и кодов лишних добавлять не надо.

вот и я так же думаю, а нафига коды вставлять в данном случае?

[Gudwinn]

Источник цитаты коды вставлять в данном случае?

Я с Вами соглашусь, лишние скрипты тулить не желательно, если есть по умолчанию функционал, но зная особенность проги остилизовывать что надо и что не надо, я думаю маленький код стилей который я дал автору вопроса, меньшее зло, нежели прога бы сгенерировала стилей простыню на добавляемый триггер default )))))

[igorweb]

Источник цитаты а нафига коды вставлять в данном случае?

Типа в этом случае коды прога сама не ставит?
Если не нужно использовать сложные эффекты при помощи скриптов, то лучше для саморазвития и самообучения потренироваться на практике вставкой рукописного кода (стилей). Быстрей изучится и поймется

[anonimus]

если итог одинаков, то вижу только один вариант выбора
сделать 2 варианта, а потом сравнить их
тот вариант где получится меньше количества кода и выбрать
но всё же я склоняюсь к тому, чтобы делать всё что умеет билдер в самом билдере
думаю ни у кого не возникает вопросов почему?

[Slashtore]

Все способы хороши, отлично работают. Есть некоторая загвоздка. Мне нужно повторить ту анимацию, которая в шаблоне. Как заставить вращаться изображение удалось разобраться благодаря вам, как заставить изображение смещаться вроде как получилось добиться самостоятельно, но проблема в том, что анимация смещения запускается при любом движении мыши внутри объекта, хотя события назначены для верхнего изображения а) исчезнуть со смещением вниз при наведении курсора б) появиться со смещением так же вниз, как ни странно, при выводе за пределы. А если выше этого изображения текст, или еще изображение, то это просто воспринимается как выход за пределы объекта.

[Alex]

Источник цитаты я думаю маленький код стилей который я дал автору вопроса, меньшее зло, нежели прога бы сгенерировала стилей простыню на добавляемый триггер default

Источник цитаты то лучше для саморазвития и самообучения потренироваться на практике вставкой рукописного кода (стилей)

Я не понимаю, зачем вам программа, один для саморазвития код вставляет, другой считает что его код лучше, чем программный
Делали бы сразу в notepad, там и код чище и места для самореализации очень много.

Мне вот как видится, кто не знает как в программе сделать что то, просто сторонние решения ищут, вот и всё.

[Gudwinn]

Источник цитаты другой считает что его код лучше, чем программный

Алекс, ну ведь Вы же сами где то писали что некоторый функционал дефолтный не доведён до ума? Так и что спорить то, вы можете в диспетчере посмотреть в браузере какие по величине стили прога генерит, и какой код по величине если делать кастомные включения. И я не считаю что код данный мною лучше, я считаю что такой подход более грамотный. В нотпаде ++ еще года три назад начинал потуги, но так как хотел несколько языков программирования за раз изучить, разум отказался это воспринимать))) Сейчас джава скрипт юзаю и php, определённые маленькие успехи есть, даже удалось кастомизацию по некоторым функциям в билдере воплотить (очень удобно и об этом будут видео уроки(зарисовки, уроки громко сказано)из интересных методов и их производных, которые прикрутил в форме визуализации (что вижу, то и получаю) append(), clone(), innerHtml.

[Alex]

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

[Gudwinn]

Источник цитаты в голове?

Частично)) Оператива вроде позволяет)))) Ну а серьёзно если, то что сложного создать папки и подпапки на компе?

[igorweb]

Источник цитаты Я не понимаю, зачем вам программа

Что криминального в том, что код рукописный есть и его можно использовать?.. Дали несколько решений, что в этом плохого? Кому как удобней, тот так и будет использовать. Давайте как-то нейтрально это воспринимать, не нужно накалять обстановку на ровном месте. Лично мне удобней, если чего не знаю, то использовать рукописные коды и пытаться разобраться что за что отвечает и как что-то самому изменить. Даже шпаргалки когда в школе/институте писали, то материал усваивался и запоминался в разы легче, чем простая зубрежка (в данным случае готовое решение при помощи Билдера). Захочет чел разобраться - вникнет в код, не захочет - поставит готовое решение при помощи Билдера.