4

Создал небольшую анимацию 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 - нет.

2

1 ответ 1

3

.logo {
  animation: logo-wrapper-transform 5s infinite;
  transform-style: preserve-3d;
  perspective: 500px;
  display: block;
  position: relative;
}
.logo svg {
  display: block;
}
.logo svg:not(:first-child) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.logo svg:not(:first-child):nth-child(1) {
  transform: translateZ(10px);
}
.logo svg:not(:first-child):nth-child(2) {
  transform: translateZ(20px);
}
.logo svg:not(:first-child):nth-child(3) {
  transform: translateZ(30px);
}
.logo svg:not(:first-child):nth-child(4) {
  transform: translateZ(40px);
}
.logo svg:not(:first-child):nth-child(5) {
  transform: translateZ(50px);
}
.logo svg:not(:first-child):nth-child(6) {
  transform: translateZ(60px);
}
.logo svg:not(:first-child):nth-child(7) {
  transform: translateZ(70px);
}
.logo svg:not(:first-child):nth-child(8) {
  transform: translateZ(80px);
}
.logo svg:not(:first-child):nth-child(9) {
  transform: translateZ(90px);
}
.logo svg:not(:first-child):nth-child(10) {
  transform: translateZ(100px);
}
@keyframes logo-wrapper-transform {
  0% {
    transform: rotate3d(0.2, 1, 0, 30deg);
  }
  50% {
    transform: rotate3d(0.2, 1, 0, -30deg);
  }
}
.logo .logo-background path {
  fill: rgba(0, 0, 0, 0.2);
}
.logo .logo-stroke path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 5;
  stroke-miterlimit: 10;
}
.logo .logo-outline path {
  fill: none;
  stroke: #e74c3c;
  stroke-width: 20;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  animation: logo-outline-path 3s infinite;
}
.logo .logo-outline path:nth-child(1) {
  animation-delay: 1s;
}
.logo .logo-outline path:nth-child(2) {
  animation-delay: 2s;
}
.logo .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;
  }
}
.logo .logo-dots circle {
  fill: none;
  stroke: #e74c3c;
  stroke-width: 20;
  stroke-miterlimit: 10;
  animation: logo-dots 3s infinite;
}
.logo .logo-dots circle:nth-child(1) {
  animation-delay: 1s;
}
.logo .logo-dots circle:nth-child(2) {
  animation-delay: 2s;
}
.logo .logo-dots circle:nth-child(3) {
  animation-delay: 3s;
}
@keyframes logo-dots {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.logo .logo-center-background .wrapper {
  opacity: 0.1;
  fill: none;
  stroke: #000000;
  stroke-width: 3;
  stroke-miterlimit: 10;
}
.logo .logo-center-background .inner {
  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);
  }
}
.logo .logo-center-inner .inner {
  fill: none;
  stroke: #e74c3c;
  stroke-width: 75;
  stroke-miterlimit: 100;
  stroke-dasharray: 10px;
  opacity: 1;
}
.logo .logo-center-inner .inner .inner {
  stroke-width: 100;
}
.logo .logo-center-inner .inner.active {
  opacity: 1;
  stroke: #e74c3c;
  stroke-dashoffset: 0;
}
.logo .logo-center-inner polyline {
  fill: none;
  stroke: #e74c3c;
  stroke-width: 50;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 1;
}
<div class="logo">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-background">
		<path 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"/>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-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"/>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-outline">
		<path 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 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 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"/>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-dots">
		<circle cx="797.4" cy="111.89" r="10"/>
		<circle cx="402.17" cy="811.45" r="10"/>
		<circle cx="1193.4" cy="811.45" r="10"/>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-center-background">
		<circle class="wrapper"  cx="797.4" cy="573.45" r="415"/>
		<circle class="inner"  cx="797.4" cy="573.45" r="415"/>
	</svg>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1594.8 1422.89" class="logo-center-inner">
		<circle class="inner" cx="797.4" cy="573.45" r="325"/>
		<circle class="inner" cx="797.4" cy="573.45" r="325">
			<circle class="active" cx="0" cy="0" r="325"></circle>
		</circle>
		<polyline points="964.94,482.14 803.78,776.36 629.86,489.5"/>
	</svg>
</div>

Собственно смог достичь необходимого эффекта с помощью совета @Stranger in the Q (/users/188366/stranger-in-the-q)

Разделил объекты на разные svg, поместил их в контейнер и выдвинул. Так же приложу код с Jsfiddle где в стилях используется SASS

3
  • Это то, что вы хотели получить? Или как-то по другому хотелось, пока только локальная победа? :) (+) 24 окт 2019 в 12:06
  • Неплохо вышло, рад что помог 24 окт 2019 в 12:08
  • 1
    @Alexandr_TT , конечно же это не вся анимация и перспектива меняется, здесь я выложил код чтобы было видно что "выпирает".
    – MoloF
    24 окт 2019 в 12:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.