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

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

[html]
<!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">Forix</p>
<p class="face front">ЛУЧШИЙ</p>
<p class="face left">ФоРуМ</p>
<p class="face rght">рунета</p>
</div>
    </div>
</div>
</body>
</html>
Вот теперь вставляйте этот код в Notepad++, и экспериментируйте с css. Если кто-то захочет закрутить куб по вертикали, то в стилях все Y нужно исправит на Х.

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

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

ДАЛЕЕ КОД:

Код:
<!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">УПС</p>
<p class="face front">УПС</p>
<p class="face left">УПС</p>
<p class="face rght">УПС</p>
</div>
    </div>
</div>
</body>
</html>

Эксперементируйте. Творите. И вытворяйте  [good]