• Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: JonMagon  
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Установка 3D-переворот по клику (3D эффект на картинке отображается некорректно. Помогите)))
Установка 3D-переворот по клику
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 1 | 19:35:03
Приветствую форумчане! Столкнулся с парой проблем при установке 3D эффекта для переворачивания картинки.

1-я проблема. Картинка наезжает на текст.



2-я проблема. Эффект переворачивания картинки работает только в Яндекс браузере, в Опере и Мозиле не работает.

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

Цитата
Также не забудьте для свойств transform и transition добавить совместимость с браузерами и их предыдущими версиями, то есть добавить:
  • -moz-transform (для старых версий Mozilla)
  • -o-transform (для Opera)
  • -ms-transform (для браузеров IE)
  • -webkit-transform (для Google Chrome и Safari)




Ниже все то, что установил на сайт

CCS

Код
#container {
    display: inline-block;
    position: relative;
    width: 500px;
    line-height: 45px;
}
#button {
    background: none repeat scroll 0 0 #555;
    color: #fff;
    cursor: pointer;
    float: left;
    height: 50px;
    text-align: center;
    width: 140px;
}
#front, #back {
    background: none repeat scroll 0 0 #ccc;
    height: 50px;
    margin: 0px auto;
    position: absolute;
    right: 0;
    text-align: center;
    transform: rotateX(0deg);
    transition: all 0.7s ease 0s;
    width: 360px;
}
#back {
    background: none repeat scroll 0 0 #ff0000;
    margin: -20px 0;
    transform: rotateX(270deg);
    transition: all 0.5s ease 0s;
}
.toback {
    transform: rotateX(270deg) !important;
}
.tofront {
    margin: 0 !important;
    transform: rotateX(0deg) !important;
}


Запускающий скрипт

Код
<script type="text/javascript">
   (function($){
       $('#button').click(function(){
       $('#front').toggleClass("toback");
       $('#back').toggleClass("tofront");
   };);
   };)jQuery);
</script>


Библиотека Квери

Код
[img]http://rubarub.ru/BLOG1/Clip2net_160227002759.jpg


HTML

Код
<div id="container">
     <div id="button">Нажми сюда</div>
     <div id="front">Запись на фронтальной стороне</div>
     <div id="back">Запись на тыльной стороне</div>
</div>


Еще, как я только вставляю эффект в статью на картинку, перестает работать панель (не активна)




Кому нетрудно, помогите исправить ошибки))

Сообщение отредактировал webanet - Пятница, 26 Фев 2016, 20:51:42
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 2 | 19:52:47
Vivaci, если честно, то я не совсем понял что вам именно нужно.

http://rubarub.ru/BLOG1/Clip2net_160227002759.jpg
В конце не хватает ИМГ
У вас не был дописано до конца, по видимому из-за этого и сползала картинка.
Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:01:21
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 3 | 19:56:00
Цитата SkyFfs ()
если честно, то я не совсем понял что вам именно нужно.

Картинка залазит на текст. Вот пример на странице: http://rubarub.ru/blog....2-25-59

И не работает этот эффект в браузерах Опера и Мозила. Может и еще в других.
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 4 | 19:58:44
А ссылку на сайт где вы его взяли можно?
Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:00:37
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 5 | 20:01:36
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 6 | 20:07:50
Сейчас гляну.
Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:09:03
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 7 | 20:07:56
Добавил вот этот скрипт и заработал эффект в опере, но в мозиле до сих пор не работает и картинка наезжает на текст.


Код
<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 8 | 20:09:40
Цитата Vivaci ()
Добавил вот этот скрипт и заработал эффект в опере, но в мозиле до сих пор не работает и картинка наезжает на текст.
Попробуйте почистить браузер.
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 9 | 20:10:58
Все, с этим скриптом везде теперь работает, во всех браузерах. Осталась одна проблема с наездом картинки на текст.
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 10 | 20:11:06
С кодами вроде бы всё в порядке.
Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:20:06
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 11 | 20:12:30
Почистил. Картинка на тексте так и осталась.

Добавлено (26 Фев 2016, 20:12:30)
---------------------------------------------
Сек. Сейчас.

SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 12 | 20:19:11
Получилось?
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 13 | 20:23:04
Я скрипт библиотеки вообще убрал, и стало показывать везде. С картинкой до сих пор проблема.
SkyFfs
Сообщений: 143
Репутация: 98

Сообщение # 14 | 20:24:23
А код самой картинки можете показать? Или лучше весь скрипт. Зашёл к вам на сайт, и у меня ничего не плывёт, и картинка на текст не наезжает.
Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:27:32
Vivaci
Сообщений: 54
Репутация: 3

Сообщение # 15 | 20:34:27
Вот таким образом я вставляю на страницу код.


Код
<p style="text-align: center;"> </p>

<div id="container">
<div id="button">Нажми сюда</div>

<div id="front"><p style="text-align: center;"><a href="http://rubarub.ru/BLOG1/Clip2net_160214220742.jpg"><img src="http://rubarub.ru/BLOG1/Clip2net_160214220742.jpg" style="width: 100%; height: 100%;" /></a></p></div>

<div id="back"><!-- admitad.banner: 383095c9ce663db9be893a47696a87 Нетология --> <a target="_blank" rel="nofollow" href="https://ad.admitad.com/g/383095c9ce663db9be893a47696a87/?i=4">  <img width="100%" height="290" border="0" src="https://ad.admitad.com/b/383095c9ce663db9be893a47696a87/" alt="Нетология"/> </a> <!-- /admitad.banner --></div>
</div>


Здесь в нем еще дополнительный код установил для увеличения картинки фронтальной стороны. Сюда почему-то не закидывается. Скрином покажу сейчас.

Добавлено (26 Фев 2016, 20:34:27)
---------------------------------------------
Вот скрипт



Код
<script type='text/javascript' src='http://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>

   (function($){
       $('#button').click(function(){
       $('#front').toggleClass("toback");
       $('#back').toggleClass("tofront");
   });
   })(jQuery);
</script>
Сообщество uCoz » Вебмастеру » JavaScript, Flash и прочие технологии » Установка 3D-переворот по клику (3D эффект на картинке отображается некорректно. Помогите)))
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск: