[html]
<style>
* Создаём объёмный блок */
.logotip {
perspective: 1000px;
position: relative;
margin-left: 200px;
width: 70px;
height: 70px;
transform-style: preserve-3d;
}
/* Создаём 5 блоков для каждого элемента буквы */
.basis,
.basis1,
.basis2,
.basis3,
.basis4 {
display: block;
position: absolute;
border-radius: 2px;
list-style: none;
}

.basis {
top: 0px;
left: 0px;
width: 20px;
height: 70px;
}
.basis1 {
top: 20px;
left: 18px;
width: 15px;
height: 20px;
}
.basis2 {
top: 0px;
left: 31px;
width: 20px;
height: 70px;
}
.basis3 {
top: 0px;
left: 49px;
width: 15px;
height: 20px;
}
.basis4 {
top: 0px;
left: 61px;
width: 20px;
height: 70px;
}

/* Создаём элементы букв */
.front,
.front1,
.front2,
.front3,
.front4 {
transform: translateZ(10px);
background: hsl(205, 90%, 40%);
}

.back,
.back1,
.back2,
.back3,
.back4 {
transform: translateZ(-10px) rotateY(-180deg);
background: hsl(205, 90%, 40%);
}

.left,
.left2,
.left4 {
transform: translateX(-10px) rotateY(-90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
.right,
.right2,
.right4 {
transform: translateX(10px) rotateY(90deg);
background: linear-gradient(hsl(205, 90%, 40%), hsl(60, 90%, 50%));
}
/* Подключаем анимацию к объёмному блоку */
.rotate-y {
animation: spinY 10s infinite linear;
}
/* Анимация непрерывного вращения */
@keyframes spinY {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
</style>

<div class="logotip">
<ul class="logotip rotate-y">
<li class="basis back"></li>
<li class="basis front"></li>
<li class="basis left"></li>
<li class="basis right"></li>
<li class="basis1 back1"></li>
<li class="basis1 front1"></li>
<li class="basis2 front2"></li>
<li class="basis2 back2"></li>
<li class="basis2 left2"></li>
<li class="basis2 right2"></li>
<li class="basis3 front3"></li>
<li class="basis3 back3"></li>
<li class="basis4 front4"></li>
<li class="basis4 back4"></li>
<li class="basis4 left4"></li>
<li class="basis4 right4"></li>
</ul>
</div>
[/html]

Подпись автора

[marquee=left]«МФ»    Мы такие разные и всё-таки мы вместе По любым вопросам касающимся форума, обращайтесь ко мне в л/с. [/marquee]