Скрипты для сайтов — эффекты CSS — вращающийся куб баннер.
Скрипты для сайтов — эффекты CSS — вращающийся куб баннер
Образец выполнения кода:
PHP
HTML
CSS
MOUNY
Листинг кода
<style>
.wrap {
-webkit-perspective: 500px;
-ms-perspective: 500px;
perspective: 500px;
-webkit-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
float: left;
margin-right: 100px;
}
.cube {
position: relative;
margin: 20px;
width: 70px;
height: 70px;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face {
display: block;
position: absolute
; top: 0; left: 0;
width: 70px; height: 70px;
padding: 5px 3px; color: #1F0405;
font-size: 16px;
text-align: center;
line-height: 70px;
border-radius: 4px;
box-shadow: inset 0 0 0 2px #705E5F;
}
.front {
-webkit-transform: translateZ(38px);
-ms-transform: translateZ(38px);
transform: translateZ(38px);
background: #fff;
}
.back {
-webkit-transform: translateZ(-38px) rotateY(-180deg);
-ms-transform: translateZ(-38px) rotateY(-180deg);
transform: translateZ(-38px) rotateY(-180deg);
background: #fff;
}
.left {
-webkit-transform: translateX(-38px) rotateY(-90deg);
-ms-transform: translateX(-38px) rotateY(-90deg);
transform: translateX(-38px) rotateY(-90deg);
background: #fff;
}
.rght {
-webkit-transform: translateX(38px) rotateY(90deg);
-ms-transform: translateX(38px) rotateY(90deg);
transform: translateX(38px) rotateY(90deg);
background: #fff;
}
.rotate-y {
-webkit-animation: spinY 10s infinite linear;
-ms-animation: spinY 10s infinite linear;
animation: spinY 10s infinite linear;
}
@-webkit-keyframes spinY {
from { -webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
@keyframes spinY {
from {
-webkit-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);
}
to {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
}
</style>
<div id="wrap" class="wrap">
<div class="cube">
<div id="cube" class="cube rotate-y">
<p class="face back">PHP</p>
<p class="face front">HTML</p>
<p class="face left">CSS</p>
<p class="face rght">MOUNY</p>
</div>
</div>
</div>
Обмен визитами — бесплатная раскрутка сайта.
Самый простой способ, это по старинке, обмен визитами через ввод адреса сайта в форму:
Ссылка не должна превышать 200 символов и должна обязательно являться URL адресом. Без пробелов.
***
Трейн-чекс Уроки WEB программирования.
- ПОДДЕРЖАТЬ ПРОЕКТ на WebMoney
- WEST-HOSTER
- ПОРТАЛ СООБЩЕСТВА 🕶️
- HTML JS CSS РЕДАКТОР
- ШРИФТЫ ДЛЯ САЙТОВ
- ПРОМПТЫ ДЛЯ ШЕДЕВРУМА
- Символ неразрывного пробела
- Скрипт считывания клавиш
- Файлы куки
- AJAX счётчик кликов
- Запрет кэширования JS и PHP
- Координаты курсора JS
- Числа от 1 до 10 на JS
- Перевести двоичный код в кратный на JS
- CSS на JavaScript
- Новые теги HTML
- Может ли HTML 6 заменить JavaScript
- HTML форма без перезагрузки страницы
- Смайлы эмоджи — ГЕНЕРАТОР
- Форматы изображений
- Скрипт AJAX лайков и дизлайков
- Горячие клавиши
- Скачать изображение в CANVAS
- Какими будут сайты будущего?
- Что делает администратор сайта
- Девушка фурри Милка Маус
- CMS движки для сайтов
Мануалы PHP
- Мануалы PHP — Фильтры
- Мануалы PHP — Узнать IP адрес
- Мануалы PHP — Файлы папки директории
- Мануалы PHP — Вывод файлов scandir()
- Мануалы PHP — Отправка данных из формы
- Мануалы PHP — Запись данных в файл
- Мануалы PHP — Запрет повторной отправки формы
- Мануалы PHP — Дата и время
- Мануалы PHP — Отправка E-mail
- Мануалы PHP — Работа с изображениями
- Мануалы PHP — Вход по паролю
- Отправка формы AJAX
- Геолокация на PHP, узнать город
- Выполнение PHP скрипта по клику
- Маскировка ссылок
- Таблица умножения
Анимация JS
- Шифровка текста на JS
- Безумный текст
- Компрессор кода
- Уведомления на рабочий стол
- Перезагрузка на JS и PHP
- Рейтинг на JS и PHP
- Виджет комментариев на PHP
- Рекламный баннер на CSS
- Запрет копирования
- Узнать код клавиш
- Скрипт кода клавиш
- Конвертер кода в спецсимволы
- Бесконечный алерт
- Вывод случайных фраз
- Откуда пришёл посетитель на JS
- CSS type radio checkbox
- Эффекты с текстом
- Посетители онлайн на PHP
- Cookie счётчик посещений
- Анимация текста
- Type — range
- Лабиринт на JS
- Дата и время на JS
- CSS меню блокнот
- CSS меню книжная полка
- CSS вращающийся баннер
- JavaScript азбука морзе
- JavaScript копирайт
- JavaScript анимация текста
- JavaScript звуки
- Кнопка вверх
- Подсчёт символов на JavaScript
- Работа с куками на PHP
AXAJ -JS
- AJAX счётчик кликов
- Генератор случайных чисел
- PHP счётчик страниц
- PHP запись файлов
- Дата посещения страницы на PHP
- Счётчик лайков на PHP
- Дата изменения страницы
- Игра JS — угадай число
- Круговое меню для сайта
- Навигатор
- Запрет копирования
- Вычислить дату на JS
- Кнопка на CSS
- view-source: исходный код
- Анимация JS
- Время проведённое на сайте
- Календарь JS
- Снег для сайта
- Анимация волны
- Добавить в избранное
- Срок жизни сайта
- Таймер на JS
- Блокировка мыши и клавиатуры
- Приветствие по времени суток
- JS время
- Яндекс поиск
