Чат сообщества
   | |
| Модератор форума: JonMagon |
| Сообщество uCoz Вебмастеру JavaScript, Flash и прочие технологии Установка 3D-переворот по клику (3D эффект на картинке отображается некорректно. Помогите))) |
| Установка 3D-переворот по клику |
|
Приветствую форумчане! Столкнулся с парой проблем при установке 3D эффекта для переворачивания картинки.
1-я проблема. Картинка наезжает на текст.  2-я проблема. Эффект переворачивания картинки работает только в Яндекс браузере, в Опере и Мозиле не работает. Сайт на котором я взял код, пишет, чтобы отображалось в других браузера, нужно сделать как-то так: Цитата Также не забудьте для свойств transform и transition добавить совместимость с браузерами и их предыдущими версиями, то есть добавить:
Ниже все то, что установил на сайт 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
|
|
Vivaci, если честно, то я не совсем понял что вам именно нужно.
http://rubarub.ru/BLOG1/Clip2net_160227002759.jpg В конце не хватает ИМГ У вас не был дописано до конца, по видимому из-за этого и сползала картинка. Сообщение отредактировал SkyFfs - Пятница, 26 Фев 2016, 20:01:21
|
|
Цитата SkyFfs (  )если честно, то я не совсем понял что вам именно нужно. Картинка залазит на текст. Вот пример на странице: http://rubarub.ru/blog....2-25-59 И не работает этот эффект в браузерах Опера и Мозила. Может и еще в других. |
|
|
|
Вот таким образом я вставляю на страницу код.
Код <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> |
| |||