Пятница, 18.01.2019, 10:05
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта
Наш опрос
Какой поисковик Вы используете?


Всего ответов: 309

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 6
Гостей: 6
Пользователей: 0


Зарегистрировано 30739 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1128 материала(ов), Оставлено 5146 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Расскажи Друзьям!
Комментарии
Новость: Просмотры и посетители для вашего сайта БЕСПЛАТНО
Aleksandrs написал:
ну кто уже получает посетителей для своего сайта? у кого сколько кредитов?
Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
написал:
Еще можно такой вариант, повторяю, только после (не удаляя $MESSAGE$)

<br><legend><img src="http://img15.lostpic.net/2018/12/27/19e957f8a56dd9216e82c18319ba85aa.gif"</legend>
<b><?substr($MESAGE$,0,550)?>
<?$RELATED_ENTRIES$(8)?>
<?substr($MESAGES$,550,50000)?></b>
Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
написал:
Заменять ни чего не надо, после $MESSAGE$
Вставить следующее (доработано):
<br><br><span style="color:#b22222;"><strong>Похожие новости</strong></span>
<?substr($MESAGE$,0,550)?>
<?$RELATED_ENTRIES$(5)?>
<?substr($MESAGES$,550,50000)?>
Новость: Похожие новости $RELATED_ENTRIES$ внутри полного текста новости $MESSAGE$ на uCoz
Aleksandrs написал:
я добавил код картинкой, чтобы он коректно отображался у всех. просто перепиши код с картинки

Читать все комментарии
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Как это сделать? (для новичков с картинками) » Добавлено [16.11.2013, 19:27]

Коробка с 3D вращением для вашего сайта

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Представляю всеобщему вниманию короткий урок, как создавать из обычных элементов вращающиеся 3D модели, ну например коробок. Не знаю зачем это может вам понадобиться, но получаются очень красивые элементы.

Используем CSS3 и javascript. Причем, из обычной обложки можно создать реально объемное изображение, будет выглядеть как книжка или обложка для диска - иметь три или четыре грани на котороые можно нанести собственные картинки и текст. Вращается при помощи кнопки пуск. Например, если ваш сайт занимается реализацией книг - будет очень интересно для пользователя рассмотреть обложку и корешок книги как в реальном магазине. Пользователи оценят этот стильный и современный ход, ну а вы можете благодарить нас за урок. Скачивайте демо-версию и описание, коды скачивайте и учитесь делать такие вот классные и красивые штуки. МОжно использовать не только как рекламу книг или дисков, но и как собственный элемент оформления сайта - такая вот вращающаяся информация. Если нашли еще интересные применения для данной штуковины - отпишитесь в комментариях.

Важно! Картинку из прикреплённого архива залейте в папку images

Установка:

В css в самый низ:

.container {
margin: 100px auto auto 100px;
position: relative;
width: 226px;
height: 316px;
/* задаем глубину сцене */
-webkit-perspective: 600px; /* webkit */
-moz-perspective: 600px; /* mozilla */
-ms-perspective: 600px; /* IE 10 */
-o-perspective: 600px; /* opera когда-то тоже должна начать понимать */
perspective: 600px; /* св-во по стандартам */
}

#book { /* поварачивать будет общий контейнер */
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;

-webkit-transition: -webkit-transform 1.5s;
-moz-transition: -moz-transform 1.5s;
-ms-transition: -moz-transform 1.5s;
-o-transition: -o-transform 1.5s;
transition: transform 1.5s; /* трансформации будут происходить анимированно продолжительностью 0.5 сек */

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d; /* указываем, что дочерние элементы находятся в 3D пространстве */

}
#book.flip { /* добавляя этот класс, поворачиваем контейнер на 180 градусов */
-webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
-ms-transform: rotateY( 180deg );
-o-transform: rotateY( 180deg );
transform: rotateY( 180deg );
}

figure {
position: absolute;
display: block;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden; /* если элемент отвернут лицом от пользователя, контент этого элемента не виден */
}
.back, .front, .left-1, .left-2, .right {
background: url(/images/book-texture.jpg);
}
.front {
width: 100%;
height: 100%;
background-position: -276px 0;
-webkit-transform: rotateY( 0deg ) translateZ( 25px );
-moz-transform: rotateY( 0deg ) translateZ( 25px );
-ms-transform: rotateY(0deg) translateZ( 25px );
-o-transform: rotateY( 0deg ) translateZ( 25px );
transform: rotateY( 0deg ) translateZ( 25px );
/*
rotateY - поворачиваем грань на нужный угол
translateZ - т.к. объект имеет толщину
*/
}
.back {
width: 100%;
height: 100%;
-webkit-transform: rotateY( 180deg ) translateZ( 25px );
-moz-transform: rotateY( 180deg ) translateZ( 25px );
-ms-transform: rotateY(180deg) translateZ( 25px );
-o-transform: rotateY( 180deg ) translateZ( 25px );
transform: rotateY( 180deg ) translateZ( 25px ); /* в начальном положении фэйс карты к нам развернут на 180 градусов */
}

/*
придаем выпуклости торцу
разбиваем его на две части и ставим их под небольшим углом друг к другу

*/
.left-1 {
background-position: -250px 0;
width: 28.5px;
/*
тут я немного схалтурил. реально размер половины грани равен 25px и при этом значении оставалась дырка между гранями
в этом примере не стал пересчитывать толщину книги с учетом потерь из-за "выпуклости" торца
*/
height: 100%;
-webkit-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
-moz-transform: rotateY( -70deg ) translate3d(-3px, 0, 8px );
-ms-transform: rotateY(-70deg) translate3d( -3px, 0, 8px );
-o-transform: rotateY( -70deg ) translate3d( -3px, 0, 8px );
transform: rotateY( -70deg ) translate3d( -3px, 0, 8px ); /*
8 получаем из решения прямоугольного треугольника (по известному углу и гипотенузе вычисляем катет) online решить можно тут http://www.fxyz.ru/
-3 - костыль, подобранный в ручную для этого примера
*/
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center; /* поворачиваю торцы вокруг их левой границы: так проще потом расположить элемент (в данном случае) */
}
.left-2 {
background-position: -225px 0;
width: 28px;
height: 100%;
-webkit-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
-moz-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
-ms-transform: rotateY(-110deg) translate3d( -24.5px, 0, 8px );
-o-transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px );
transform: rotateY( -110deg ) translate3d( -24.5px, 0, 8px ); /*24.5 - тоже из решения прямоугольного треугольника - второй катет */

-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.right {
background-position: -276px 0;
width: 50px;
height: 100%;
-webkit-transform: rotateY( 90deg );
-moz-transform: rotateY( 90deg );
-ms-transform: rotateY(90deg);
-o-transform: rotateY( 90deg );
transform: rotateY( 90deg );
top: 0;
right: 0;
}


HTML код:
<script>
/* DOM Utility Functions from PastryKit */
Element.prototype.hasClassName = function (a) {
return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className);
};

Element.prototype.addClassName = function (a) {
if (!this.hasClassName(a)) {
this.className = [this.className, a].join(" ");
}
};

Element.prototype.removeClassName = function (b) {
if (this.hasClassName(b)) {
var a = this.className;
this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " ");
}
};

Element.prototype.toggleClassName = function (a) {
this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
};
/* /DOM Utility Functions from PastryKit */

var init = function() {

document.getElementById('button').addEventListener( 'click', function(){

document.getElementById('book').toggleClassName('flip');

}, false);
}

window.addEventListener( 'DOMContentLoaded', init, false);
</script>

<div class="container" id="container">
<div id="book">
<figure class="back"></figure>
<figure class="front"></figure>
<figure class="left-1"></figure>
<figure class="left-2"></figure>
<figure class="right"></figure>
</div>
</div>
<br>
<input type="button" value="пуск" id="button" />



При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Коробка с 3D вращением для вашего сайта



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Как это сделать? (для новичков с картинками) | Добавил: scripts_for_ucoz | Теги: коробка, вашего, вращением, сайта
Просмотров: 3372 | Загрузок: 14 | Комментарии: 2 | Рейтинг: 0.0/0
Всего комментариев: 2
2 polkovnikov0786   (07.03.2014 15:00)
спасибо. класс

1 Black-Yellow   (20.01.2014 01:06)
А можно сделать так что бы она постоянно вращалась - не только при нажатии.. tongue

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz