Создал небольшую анимацию SVG объекта, но при самой анимации всё выглядит будто сплюснутый бутерброд.
Приложу JSFIDDLE
.container {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
.container .object {
transform-style: preserve-3d;
perspective: 2000px;
position: relative;
animation: object-rotate 3s infinite;
transform: rotate3d(0.2, 1, 0, -40deg) translate;
}
@keyframes object-rotate {
0% {
transform: rotate3d(0.2, 0.2, 0, 45deg);
}
25% {
transform: rotate3d(0.2, 1, 0, 45deg);
}
50% {
transform: rotate3d(0.2, 0.2, 0, -45deg);
}
75% {
transform: rotate3d(0.2, 0.2, 0, -45deg);
}
100% {
transform: rotate3d(0.2, 0.2, 0, 45deg);
}
}
.container svg {
width: 500px;
height: 500px;
}
.container svg circle {
fill: rgba(0, 0, 0, 0.5);
stroke: #000;
stroke-width: 5;
}
.container span {
display: block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
transform: translateZ(50px);
font-size: 70px;
color: #fff;
}
.container .logo {
animation: object-rotate 5s infinite;
}
.container .logo .background {
fill: rgba(0, 0, 0, 0.2);
}
.container .logo .stroke path {
fill: none;
stroke: rgba(255, 255, 255, 0.3);
stroke-width: 5;
stroke-miterlimit: 10;
}
.container .logo .outline path {
fill: none;
stroke: #e74c3c;
stroke-width: 20;
stroke-linejoin: round;
stroke-miterlimit: 10;
animation: logo-outline-path 3s infinite;
}
.container .logo .outline path:nth-child(1) {
animation-delay: 1s;
}
.container .logo .outline path:nth-child(2) {
animation-delay: 2s;
}
.container .logo .outline path:nth-child(3) {
animation-delay: 3s;
}
@keyframes logo-outline-path {
0% {
stroke-width: 20;
}
50% {
stroke-width: 10;
}
100% {
stroke-width: 20;
}
}
.container .logo .dots circle {
fill: none;
stroke: #e74c3c;
stroke-width: 20;
stroke-miterlimit: 10;
animation: logo-dots 3s infinite;
}
.container .logo .dots circle:nth-child(1) {
animation-delay: 1s;
}
.container .logo .dots circle:nth-child(2) {
animation-delay: 2s;
}
.container .logo .dots circle:nth-child(3) {
animation-delay: 3s;
}
@keyframes logo-dots {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.container .logo .center .background {
opacity: 0.1;
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 10;
}
.container .logo .center .line {
fill: none;
stroke: #e74c3c;
stroke-width: 3;
stroke-miterlimit: 10;
stroke-dasharray: 100%;
animation: logo-circle-line 5s infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes logo-circle-line {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(359deg);
}
}
.container .logo .center .inner {
fill: none;
stroke: #e74c3c;
stroke-width: 75;
stroke-miterlimit: 100;
stroke-dasharray: 10px;
opacity: 1;
}
.container .logo .center .inner .inner {
stroke-width: 100;
}
.container .logo .center .inner.active {
opacity: 1;
stroke: #e74c3c;
stroke-dashoffset: 0;
}
.container .logo .center polyline {
fill: none;
stroke: #e74c3c;
stroke-width: 50;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 1;
}
<h4>Данный вариант будет работать</h4>
<div class="container">
<div class="object">
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="20" />
</svg>
<span>Text</span>
</div>
</div>
<h4>Данный вариант не будет работать</h4>
<div class="container">
<div class="object">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo">
<path class="background" d="M798.8,2.5h591.81c82.46,0,108.07,44.63,144.15,107.12s82.63,142.83,41.4,214.25L1280.25,836.4l-295.91,512.52 c-41.23,71.42-113.39,71.47-185.54,71.47s-144.31-0.06-185.54-71.47L317.35,836.4L21.44,323.87c-40.74-70.56-8.2-121.84,26.71-184 C83.9,76.21,123.53,2.5,206.98,2.5H798.8z"/>
<g class="stroke">
<path class="bottom" d="M798.1,1055.45c-116.26,0-222.91-41.14-306.2-109.65l154.98,268.43 c33.76,58.47,92.83,65.83,151.91,65.83c59.08,0,118.15-7.36,151.91-65.83l156.28-270.68 C1023.3,1013.4,915.62,1055.45,798.1,1055.45z"/>
<path class="top-left" d="M162.36,375.01l159.85,276.87c-4.21-25.63-6.44-51.93-6.44-78.76 c0-217.16,143.52-400.78,340.87-461.23H314.27c-69.44,0-99.89,51.03-128.77,104.49C158.22,266.88,129.57,318.21,162.36,375.01z"/>
<path class="top-right" d="M1280.43,573.12c0,28-2.42,55.43-6.99,82.12l161.8-280.24 c33.16-57.43,8.44-100.68-19.69-151.44c-29.14-52.59-63.51-111.67-132.22-111.67H939.55 C1136.91,172.35,1280.43,355.97,1280.43,573.12z"/>
</g>
<g class="outline">
<path class="top-left" d="M314.27,111.89c-69.44,0-99.89,51.03-128.77,104.49c-27.28,50.49-55.93,101.82-23.13,158.62"/>
<path class="bottom" d="M647.53,1214.23c33.76,58.47,92.83,65.83,151.91,65.83c59.08,0,118.15-7.36,151.91-65.83"/>
<path class="top-right" d="M1435.23,375.01c33.16-57.43,8.44-100.68-19.69-151.44 c-29.14-52.59-63.51-111.67-132.22-111.67"/>
</g>
<g class="dots">
<circle class="top" cx="797.4" cy="111.89" r="10"/>
<circle class="bottom-left" cx="402.17" cy="811.45" r="10"/>
<circle class="bottom-right" cx="1193.4" cy="811.45" r="10"/>
</g>
<g class="center">
<circle class="background" cx="797.4" cy="573.45" r="415"/>
<circle class="line" cx="797.4" cy="573.45" r="415"/>
<circle class="inner" cx="797.4" cy="573.45" r="325"/>
<circle class="inner active" cx="797.4" cy="573.45" r="325"/>
<polyline points="964.94,482.14 803.78,776.36 629.86,489.5"/>
</g>
</svg>
</div>
</div>
Проблема заключается как раз в плоскости самого объекта. Буквально вырвал из проекта логотип и анимировал немного. Вопрос касается только этого сплюснутого бутерброда, перспектива на SVG не действует как бы я не пытался.
@Alexandr_TT , я создал отдельно тему.
На Jsfiddle стили более читабильны, здесь я просто воспользовался онлайн компилятором и всё перенёс.
upd: Да, я пробовал каждому элементу добавлять абсолютное позицирование, пробовал менять translateZ и ещё много других извращений, с места относительно Z он не сдвинулся. По X,Y всё тянется, но по Z - нет.