.spin-div
{
 display:inline-block;    /* Строчно-блочный элемент */
 width:8%;                /* Ширина 16% от родителя */
 margin-top: 4px;         /* Отступ сверху */
 font-size: 2.2px;        /* Базовый размер для em в 3D */
 vertical-align:middle;   /* Вертикальное выравнивание */
 text-align:right;        /* Выравнивание текста вправо */
 /*border: 1px solid black;*/ /* Рамка для отладки */
}

.logo-s3d
{
 margin-top: 2px;
 margin-right: 6px;
 width: 16em;
 height: 8em;          
}

/* полупрозрачность */
.spin-div.grey 
{
 /*opacity: 0.6;*/
 /*filter: grayscale(100%); */         
}

.spin-side,.spin3d 
{
 width: 10em;                /* Ширина куба и его граней */
 height: 10em;               /* Высота куба и его граней */
}

.spin3d 
{
 display: inline-block;       /* Контейнер куба как inline-блок */
 transform-style: preserve-3d;/* Сохраняет 3D для вложенных элементов */
 /* Анимация вращения */
 animation: rotate 10s infinite linear;
}

.spin-side 
{
 position:absolute;          /* Грани располагаются абсолютно */
 width: 8em;
 height:8em;
 border:.15em solid white;   /* Белая рамка */
 border-radius:4em;          /* Скругление углов куба */
 transform-style:preserve-3d;/* 3D для псевдоэлементов */
 animation: grayscaleShift 9s infinite alternate ease-in-out;
}

/* Разное время анимации для каждой грани */
.spin-back {animation-duration: 7s; animation-delay: 0s;}
.spin-left {animation-duration: 8s; animation-delay: -1s;}
.spin-right {animation-duration: 6s; animation-delay: -2s;}
.spin-top  {animation-duration: 10s; animation-delay: -3s;}
.spin-bottom {animation-duration: 9s; animation-delay: -4s;}
.spin-front {animation-duration: 8.5s; animation-delay: -5s;}

@keyframes grayscaleShift 
{
 0%  {filter: grayscale(0%); opacity: 0.9;}
 25% {filter: grayscale(100%); opacity: 0.1;}
 50% {filter: grayscale(30%); opacity: 0.7;}
 75% {filter: grayscale(70%); opacity: 0.3;}
 100%{filter: grayscale(10%); opacity: 0.7;}
}

.spin-side:before,.spin-side:after 
{
 content:"";                 /* Пустые псевдоэлементы */
 display:block;
 position:absolute;
 left:0;
 right:0;
 bottom:0;
 top:0;
 margin:auto; /* Центрирование */
 transform:translateZ(2em) rotateZ(180deg); /* Вынос вперёд и поворот */
}

/* Задняя грань */
.spin-back 
{
 transform:translateZ(-5em) rotateY(180deg); 
 background:url(../pic/spin/spin-swas.png) center no-repeat;
 background-size:contain;
}

/* Левая грань */
.spin-left 
{
 transform:translateX(-5em) rotateY(-90deg); 
 background:url(../pic/spin/spin-drag.png) center no-repeat;
 background-size:contain;
}

/* Правая грань */
.spin-right 
{
 transform:translateX(5em) rotateY(90deg);  
 background:url(../pic/spin/spin-sgtxt.png) center no-repeat;
 background-size:contain;
}

/* Верхняя грань */
.spin-top 
{
 transform:translateY(-5em) rotateX(90deg);  
 background:url(../pic/spin/spin-air.webp) center no-repeat;
 background-size:contain;
}

/* Нижняя грань */
.spin-bottom 
{
 transform:translateY(5em) rotateX(-90deg);  
 background:url(../pic/spin/spin-flag2.webp) center no-repeat;
 background-size:contain;
}

/* Передняя грань */
.spin-front 
{
 transform:translateZ(5em); 
 background:url(../pic/spin/spin-lion.png) center no-repeat;
 background-size:contain;
}

/* Полный оборот по всем осям */
@keyframes rotate{100%{transform:rotateX(360deg) rotateY(-360deg) rotateZ(360deg);}}