I am attempting to rotate a 'cog' using CSS (an SVG cog).
However I was wondering if it was possible to keep the gradient at a constant angle so that it appears more realistic.
e.g. cog rotates 20deg using CSS transforms but the gradient stays at 0deg so it looks like there is a constant light source.
You can just animate the background angle from 360 to 0 while animation the rotation from 0 to 360. it will make the background stay static. for make available animation of background angle use CSS.registerProperty.
As here:
CSS.registerProperty({
name: '--deg',
syntax: '<angle>',
inherits: false,
initialValue: '0deg',
});
:root {
--deg: 0deg;
}
body {
width: 100%;
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
}
#d {
overflow:hidden;
width: 100px;
height: 100px;
position: absolute;
right:0;
left:0;
bottom:0;
top:0;
margin:auto;
background: linear-gradient(var(--deg), red, yellow, green);
transform-origin: center center;
animation: rotation 2s linear infinite;
}
#keyframes rotation {
0% {transform: rotate(0deg); --deg: 360deg}
100% {transform: rotate(360deg); --deg: 0deg}
}
<div id="d"></div>
So it turns out that you can't rotate the gradient in an SVG with CSS (or at least I couldn't find it if you can).
Instead using native SVG rotation on the gradient was the solution.
They key is to add the following within the <linearGradient>
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 250 250"
to="360 250 250"
dur="10s"
repeatCount="indefinite"/>
body {
display: flex;
align-items: center;
justify-content: center;
}
.cog {
width: 500px;
height: 500px;
animation: rotation-0 10s linear infinite;
}
#keyframes rotation-0 {
0% {
transform: rotate(1deg);
}
100% {
transform: rotate(-359deg);
}
}
<svg class="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" xml:space="preserve">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="20%" style="stop-color:#28b493;stop-opacity:1" />
<stop offset="80%" style="stop-color:#007c9b;stop-opacity:1" />
<animateTransform
attributeName="gradientTransform"
type="rotate"
from="0 22 22"
to="360 22 22"
dur="10s"
repeatCount="indefinite"/>
</linearGradient>
</defs>
<path fill="url(#grad)" d="M44,24.707v-5.5l-6.574-2.738c-0.184-0.516-0.377-1.015-0.613-1.505l2.656-6.606l-3.891-3.889l-6.549,2.696 c-0.498-0.242-1.008-0.445-1.535-0.634L24.707,0h-5.5l-2.718,6.509c-0.548,0.194-1.075,0.397-1.595,0.646L8.357,4.528L4.469,8.416 l2.665,6.478c-0.259,0.532-0.467,1.074-0.667,1.633L0,19.293v5.5l6.472,2.697c0.199,0.559,0.413,1.1,0.67,1.633l-2.615,6.52 l3.888,3.889l6.494-2.676c0.522,0.248,1.054,0.447,1.601,0.635L19.293,44h5.5l2.721-6.543c0.523-0.193,1.039-0.396,1.533-0.633 l6.596,2.643l3.889-3.889l-2.709-6.562c0.232-0.494,0.418-0.994,0.602-1.504L44,24.707z M21.957,31.583 c-5.289,0-9.582-4.292-9.582-9.583s4.293-9.583,9.582-9.583c5.292,0,9.583,4.293,9.583,9.583S27.248,31.583,21.957,31.583z"/>
</svg>
.box-cirlce {width:100%; position:relative;}
.cog-small {
width: 80px;
height: 80px;
position: absolute;
top: 0;
left: 0;
background: url('https://ladaworld.com/299-large_default/differential-24-splines-side-gear.jpg') center center no-repeat;
background-size: contain;
}
#cog {
-webkit-animation: cog 5s infinite;
-moz-animation: cog 5s infinite;
-ms-animation: cog 5s infinite;
animation: cog 5s infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
animation-timing-function: linear
}
#-webkit-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#-moz-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#-ms-keyframes cog {
100%{ -webkit-transform: rotate(360deg)}
}
#keyframes cog {
100%{
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg)
}
}
<div class="box-cirlce"><div class="cog-small" id="cog"></div></div>
After an odd issue I had a few moments ago, I kept on my CSS animations experiments with SVG, but now, regarding colourizing.
My initial idea was to apply the animation rules directly over the <g> tag grouping all <path>, hoping it would work "automagically". Yeah, right...
After convincing myself that I would really need to define the rules directly over the <path> inside, I thought I'd have to play around with timings, so the first shape would start with a colour and fades to the start colour of the second. Then the second shape would end with the colour of the first shape, simulating a back-and-forth effect.
Here:
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.left path {
animation: colorize-left 6s linear infinite;
animation-delay: 4s;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right path {
animation: colorize-right 8s linear infinite;
animation-delay: 6s;
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes colorize-left {
0% {
fill: #0f68e0;
}
100% {
fill: #1998ea;
}
}
#keyframes colorize-right {
0% {
fill: #1998ea;
}
100% {
fill: #0f68e0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g id="shapes">
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
But I obviously failed as the transitions aren't smooth as intended. Could anyone help me out here?
Note: If needed, a small explanation would be nice because this SVG is just a fragment of the real thing, meaning more shapes will participate this timed transition
You are almost good, the issue is that the last state of the animation is different from the first and since you made the animation to be infinite you will have a jump.
An idea to avoid this is to make the animation alternate. You need to also make both animation with the same duration and add a delay to only one element.
body,
html {
height: 100%;
}
main {
flex: 1 1 auto;
}
.box {
max-height: 600px;
max-width: 600px;
padding: 10px;
}
svg {
height: 100%;
width: 100%;
}
svg path {
fill: #0f68e0;
}
.left {
transform-origin: 190px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.left path {
animation: colorize-left 4s linear infinite alternate;
}
.right {
transform-origin: 605px 555px;
animation: spin-reverse 4000ms linear infinite;
animation-delay: 0.8s;
}
.right path {
animation: colorize-right 4s linear infinite alternate;
animation-delay: 2s;
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin-reverse {
100% {
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
}
#keyframes colorize-left {
0% {
fill: #0f68e0;
}
100% {
fill: #1998ea;
}
}
#keyframes colorize-right {
0% {
fill: #1998ea;
}
100% {
fill: #0f68e0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<wrapper class="d-flex flex-column h-100">
<main class="container-fluid d-flex align-items-center justify-content-center">
<div class="row">
<div class="col-md-12">
<div class="logo">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-20 0 841.209 765.469" enable-background="new -20 0 840.209 765.469" xml:space="preserve">
<g id="shapes">
<circle id="left" cx="190" cy="555" r="225" fill="transparent" />
<g class="left">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,485.11c1.139-5.168,2.036-10.402,3.458-15.492
c6.393-22.867,20.793-39.549,40.947-51.354c34.3-20.092,68.711-39.997,103.208-59.748c31.154-17.838,62.052-16.47,92.784,1.582
c32.845,19.292,65.925,38.18,98.85,57.336c30.349,17.658,45.821,44.029,45.862,79.242c0.045,39.324,0.059,78.648-0.007,117.973
c-0.058,34.592-15.114,60.828-44.834,78.314c-34.405,20.244-68.957,40.246-103.655,59.984c-28.94,16.463-58.437,16.797-87.462,0.377
c-35.178-19.898-70.117-40.229-104.953-60.723c-24.501-14.416-39.667-35.475-43.343-64.141c-0.102-0.797-0.561-1.547-0.854-2.318
C0,579.131,0,532.122,0,485.11z M70.932,555.338c0,22.164,0.074,44.326-0.081,66.488c-0.023,3.285,1.021,4.994,3.865,6.617
c38.42,21.941,76.777,43.994,115.087,66.127c2.745,1.584,4.771,1.902,7.687,0.215c38.438-22.244,76.941-44.373,115.497-66.414
c2.797-1.598,3.944-3.25,3.935-6.578c-0.124-44.158-0.115-88.316-0.016-132.475c0.007-3.215-0.884-5.018-3.791-6.678
c-38.713-22.1-77.351-44.33-115.946-66.633c-2.487-1.436-4.269-1.418-6.729,0.002c-38.602,22.289-77.237,44.523-115.957,66.609
c-2.979,1.699-3.626,3.627-3.611,6.732C70.982,511.346,70.931,533.342,70.932,555.338z"/>
</g>
<circle id="right" cx="605" cy="555" r="225" fill="transparent" />
<g class="right">
<path fill-rule="evenodd" clip-rule="evenodd" d="M796.181,555.313c0,19.5-0.115,39.002,0.025,58.502
c0.257,35.969-15.705,62.445-46.587,80.311c-32.976,19.076-66.024,38.029-98.902,57.271c-31.076,18.188-62.064,18.539-93.234,0.455
c-34.249-19.869-68.659-39.469-102.706-59.682c-28.814-17.105-43.453-42.863-43.624-76.43c-0.204-40-0.16-80.002-0.018-120
c0.12-33.539,14.444-59.504,43.257-76.639c35.46-21.092,71.12-41.875,107.151-61.972c30.308-16.905,60.521-14.384,90.129,3.015
c32.843,19.302,65.971,38.121,98.863,57.341c30.086,17.58,45.712,43.691,45.651,78.824
C796.153,515.977,796.181,535.645,796.181,555.313z M728.073,555.583c0-21.832-0.099-43.664,0.093-65.496
c0.034-3.813-1.063-5.908-4.44-7.838c-38.433-21.934-76.784-44.014-115.077-66.191c-2.938-1.701-5.012-1.23-7.662,0.297
c-38.331,22.109-76.691,44.166-115.103,66.137c-2.759,1.58-3.927,3.246-3.917,6.592c0.133,44.33,0.119,88.662,0.021,132.992
c-0.006,3.07,0.991,4.709,3.654,6.23c38.277,21.873,76.521,43.805,114.649,65.934c3.568,2.072,6.048,1.928,9.46-0.047
c38.011-22.002,76.078-43.906,114.229-65.664c3.254-1.855,4.196-3.883,4.171-7.447C727.994,599.249,728.073,577.417,728.073,555.583
z"/>
</g>
</g>
</svg>
</div>
</div>
</div>
</main>
</wrapper>
I have animated a svg path but I need some help. I want to know if it's possible to animate the path at a certain speed and then an other speed. Here is a JSFIDDLE for more explanation.
I want the line to go fast and then the text to be less fast.
HTML
<svg class="svg-path" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 2238.6 153.7" enable-background="new 0 0 2238.6 153.7" xml:space="preserve">
<path class="path" stroke-width="2" fill="none" stroke="#000000" d="M0,149.5c0.6,0,1629.7,0,1631,0c2.7,0,10.6,0,12.4,0c3.3,0,5.9,0,8.2,0c4.1,0,8.1,0,10.9,0
c3.8,0,5.3,0,8.7,0c3.9,0,3.6,0.1,8.1,0c6.3-0.2,8.2-0.9,12.7-2.6c4.5-1.7,8.3-4.1,11.4-7.1c3.1-3,5.5-6.6,7.1-10.7
c1.6-4.1,2.4-8.5,2.4-13.2c0-5.1-1-9.3-3.1-12.6c-2.1-3.3-4.8-6.1-8.2-8.3c-3.4-2.2-7.3-4.1-11.6-5.6c-4.3-1.5-8.8-3-13.3-4.4
c-4.6-1.4-9-3-13.3-4.8c-4.3-1.8-8.2-4-11.6-6.8c-3.4-2.8-6.1-6.2-8.2-10.3c-2.1-4.1-3.1-9.3-3.1-15.5c0-4.8,0.9-9.5,2.8-14
s4.5-8.5,8.1-11.9c3.5-3.4,7.9-6.2,13.1-8.3c5.2-2.1,11.1-3.1,17.8-3.1c7.5,0,19.1,0,25.5,0c7.5,0,22.4,0,35.9,0v140.5l44.4,0
L1788,9.6l66.3,110.3l64.5-109.8l-0.2,140.9h87.1c0,0,64.7,0,64.7-76.9c0-72-63.3-69.4-63.3-69.4s-60.7-2.7-60.7,69.2
c0,77,56.8,76.9,61,77c0.2,0,89.6,0,93.9,0V13.5l104.7,137.3l0-143.7l32.7,0 M1946.3,73.9 M2070.3,74.1"/>
</svg>
CSS
svg{
&.svg-path{
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
.path {
stroke-dasharray: 3800;
stroke-dashoffset: 0;
animation: dash 3.5s linear reverse;
}
}
#keyframes dash {
to {
stroke-dashoffset: 3800;
}
}
Is that possible to do this with one svg path ?
use this example http://jsfiddle.net/wxx5o9ms/1/
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
70% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
I've animated a SVG and I want to use keyframe to set the speed but I'm not able to achieve what I want. I want that the line go fast and then the text to be less fast. But I don't really understand how it's work.
Here is a Jsfiddle for better explanation.
<svg class="svg-path" version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-195.9 282.3 995.9 35.5" enable-background="new -195.9 282.3 995.9 35.5" xml:space="preserve">
<path class="path" stroke-width="1" fill="none" stroke="#000000" d="M-195.9,316.9c0.1,0,853.9,0,854.2,0c0.6,0,2.5,0,2.9,0c0.8,0,1.4,0,1.9,0c1,0,1.9,0,2.5,0
c0.9,0,1.2,0,2,0c0.9,0,0.8,0,1.9,0c1.5,0,1.9-0.2,3-0.6c1-0.4,1.9-1,2.7-1.7c0.7-0.7,1.3-1.5,1.7-2.5c0.4-1,0.6-3,0.6-4.1
c0-1.2-0.3-2.1-0.7-2.9c-0.4-0.8-1-1.4-1.9-1.9c-0.8-0.5-1.7-1-2.7-1.3s-2.1-0.7-3.1-1c-1.1-0.3-2.1-0.7-3.1-1.1
c-1-0.4-1.9-0.9-2.7-1.6c-0.8-0.7-1.4-1.4-1.9-2.4c-0.5-1-0.7-2.2-0.7-3.6c0-1.1,0-1.5,0.5-2.5c0.4-1,1.4-2.1,2-2.7
c0.8-0.8,1.9-1.2,3.1-1.7c1.2-0.5,2.6-0.7,4.2-0.7c1.7,0,4.5,0,5.9,0c1.7,0,5.2,0,8.4,0v32.8h10.4l0-32.9l15.5,25.7l15-25.6l0,32.9
h20.3c0,0,15.1,0,15.1-17.9c0-16.8-14.8-16.2-14.8-16.2s-14.2-0.6-14.2,16.2c0,18,13.2,17.9,14.2,18c0,0,20.9,0,21.9,0v-32l24.4,32
v-33.5h7.6"/>
</svg>
CSS
svg.svg-path {
position: absolute;
top:25px;
left: 0px;
width: 100%;
height: auto;
}
svg.svg-path path {
stroke-dasharray: 3800;
animation: dash 3.5s linear reverse;
}
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
50% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
Can you try to elaborate on, what you're trying to achieve?
If you want the line to slow down in the end to write out the letters in a slower fashion, you would just allocate more time to complete the animation from about stroke-dashoffset by making it go from 0-2000 in the beginning 5% of the animation, and then reserving the rest of it for the remainder of the time, like this:
#keyframes dash {
0% {
stroke-dashoffset: 0;
transition: 'stroke-dashoffset';
}
5% {
stroke-dashoffset: 2000;
transition: 'stroke-dashoffset';
}
100% {
stroke-dashoffset: 3800;
transition: 'stroke-dashoffset';
}
}
But I'm not really sure I understood correctly, so I'm not sure this is what you're trying to achieve.
Is it possible to achieve perspective with 3d transforms on a SVG elements?
I'm talking about something similar with how the Star Wars opening titles look like with 3d perspective. This is a jsfiddle with the desired effect achieved using CSS3 3d transforms:
<section style="transform: perspective(200px) rotateX(-30deg); transform-origin: 50% 100%; text-align: justify; width: 100px;">
<p style="backface-visibility: hidden;">TEXTTEXTTEXT</p>
</section>
Update Nov 2018:
Testing the snipet from the question in latest chrome and Firefox works. Although support for 3d transforms on svg elements isn't very wide, browsers are implementing it more and more.
Origin answer :
3D transforms aren't supported on SVG elements. There are a few workarounds though :
If the svg doesn't contain elements that shouldn't be transformed, you can use CSS 3d transforms on the SVG element itself :
svg {
width: 70%;
margin: 0 auto;
display: block;
-webkit-transform: perspective(300px) rotateX(30deg);
transform: perspective(300px) rotateX(30deg);
}
<svg viewbox="0 0 100 20">
<text x="0" y="20">TEXTEXTEX</text>
</svg>
In case of polygons, you make a 2D polygon look like a 3D polygon. In the following example, the red rectangle is 3D rotated (rotateX(40deg)) and the black rectangle is a 2D SVG polygon made to look like a 3D rotated rectangle:
div{
display:inline-block;
width:200px; height:100px;
background:red;
transform:perspective(500px) rotateX(40deg);
}
svg{
display:inline-block;
width:220px; height:auto;
}
div, svg{
display:inline-block;
margin:0 10px;
}
<div></div>
<svg viewbox="0 0.5 10 4">
<polygon points="9.9 4.1 0.1 4.1 0.7 0.6 9.3 0.6" fill=""/>
</svg>
3D transforms are supported inside <svg> elements (f.e. on <circle>) (at least to some extent, it seems like perspective is isometric only).
For example, here's animation of transform: rotate3d applied to <circle> elements (tested in Chrome only):
body, html {
background: black;
width: 100%; height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
}
svg {
width: 100%;
}
.gAExgp {
transform-origin: 50% 50% 0px;
animation-name: phEs, ipaUyp;
animation-duration: 4s, 7s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.PwswZ {
transform-origin: 50% 50% 0px;
animation-name: gcRPJT, ipaUyp;
animation-duration: 4s, 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes phEs {
50% {
transform: rotate3d(0, 2, 1, 180deg);
}
100% {
transform: rotate3d(0, 2, 1, 360deg);
}
}
#keyframes gcRPJT {
50% {
transform: rotate3d(2, 0, 1, 180deg);
}
100% {
transform: rotate3d(2, 0, 1, 360deg);
}
}
#keyframes ipaUyp {
0% {
stroke: magenta;
}
33% {
stroke: cyan;
}
66% {
stroke: yellow;
}
100% {
stroke: magenta;
}
}
<!-- Logo from https://rebassjs.org -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="display:block;max-width:100%;margin:0;fill:none;stroke:cyan" vector-effect="non-scaling-stroke" class="sc-htoDjs hCHUAb"><circle cx="32" cy="32" r="32" fill="#000" stroke="none"></circle><circle cx="32" cy="32" r="30" stroke-width="1" vector-effect="non-scaling-stroke" opacity="0.5"></circle><g><circle cx="32" cy="32" r="24" stroke-width="2" vector-effect="non-scaling-stroke" class="sc-dnqmqq gAExgp"></circle><circle cx="32" cy="32" r="24" stroke-width="2" vector-effect="non-scaling-stroke" class="sc-iwsKbI PwswZ"></circle></g><text x="32" y="34" text-anchor="middle" font-family="system-ui, sans-serif" font-weight="bold" font-size="4" stroke="none" fill="white" style="text-transform:uppercase;letter-spacing:0.5em">Rebass</text></svg>
Also available here: https://codepen.io/anon/pen/MPeyEj