Вращающийся куб баннер CSS

PHP

HTML

CSS

MONEY

Здравствуйте уважаемые начинающие веб-мастера. Продолжаем знакомство с Оригинальными эффектами CSS.

Хотите такой кубик на свой сайт? Нет ничего проще, так как написан он на html и css, без скриптов и библиотек.

А если Вы хоть немного знаете html и css, самые основы, то вам не составит большого труда изменить его размер, вставить в грани куба свои записи, задать им любой цвет, или поэкспериментировать с фоновыми изображениями.

Ещё можно «закрутить» его по вертикали, сделать грани круглыми или эллипсными, и как угодно изменить скорость вращения.

Ну об этом можно и в комментариях, а пока вот код этого кубика. После объясню, как его вставить на страницу сайта на WP.

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<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>
</head>
<body>
  <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>
</body>
</html>

Вот теперь вставляйте этот код в Notepad++, и экспериментируйте с css. Если кто-то захочет закрутить куб по вертикали, то в стилях все Y нужно исправит на Х.

Теперь о том как вставить кубик на страницу сайта на WordPress.

Сначала внимательно читаем про шорткод, затем вставляем его в самый конец файла functions.php, а потом, уже в него вставляем выше приведённый код куба, от тега <style> до тега </body> включительно.

Остаётся вставить шорткод в контент, но об этом подробно рассказано в указанной статье.

Желаю творческих успехов.


Перекур

Вчера в автобусе наркоман в сумку залез, я сначала не заметила, потом сумку открываю – сидит.

Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

6 комментариев на «Вращающийся куб баннер CSS»

  1. stariс говорит:

    Анимация — это уже творчество Максим, где нет чётко заданных критериев. Я вот бывает сутками сижу, чтоб довести картинку. Так что настраивайтесь на такую работу. Зато увлекательно очень.

    Координаты вращения регулируются свойствами perspective-origin: 50% 50%; и perspective: 500px;. Попробуйте поиграть с ними. «Процент туда-процент сюда», и увидите как будет меняться вид и область вращения.

  2. stariс говорит:

    Сразу и не скажешь Нужно тщательно копать Но похоже в вашем случае что-то в пути к картинке. Именно в таких случаях обычно отображаются значки.

  3. Максим говорит:

    Попробовал задать вращение по вертикали. Вроде все нормально сделал: поменял rotateY на rotateХ, где надо поставил или убрал минус перед числом пикселей или градусов, чтобы нормально грани отображались. Но куб почему то вращается вокруг сдвинутой оси.
    Это можно заметить, если посмотреть на расстояние от края браузера до грани куба. При горизонтальном вращении это расстояние меняется нормально в зависимости от того повернут куб одной гранью (макс.расстояние ) или ребром 2 граней (мин.расстояние). А при вертикальном — видно, что он «плавает», то есть не только вращается, а и перемещается слегка вверх-вниз. Значит ось вращения не в центре грани, а сдвинута.
    Не могли бы Вы помочь с корректировкой оси? Что надо подправить? Если надо могу скинуть код.

  4. Борис говорит:

    Вставил картинки, как .
    Отображаются в виде маленьких значков картинок на гранях.
    Что не так?

  5. stariс говорит:

    Я думаю что через шорткод на всех шаблонах будет работать. У меня на Секретах и нюансах тоже крутит нормально, хотя шаблон в принципе здорово отличается.
    С картинками никаких проблем. И через css как background-image вставляются, и через html тегом <img>. Вот только с IE я ещё не доработал. Хоть и прописал перфиксы для него, но почему-то в Explorer 10, у меня, получается не кубик, а квадрат. Правда вертится гранями, но не в форме куба. В остальных браузерах нармально.

  6. Людмила говорит:

    Здорово! Не знаю, вставиться ли такой кубик у меня на сайте, но он мне очень пригодился бы. А картинки в него можно вставить?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *