I need help rotating an svg element in my logo
I want my initials "CND" to rotate like this:
HTML:
<head>
</head>
<body>
<div align="center">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcRTCKie7zNcXtCeCjnMsE8kyg7D9fC_-Hllk7VaNoXIGHPLxbWP" class="animation-rotate"/>
</div>
</body>
</html>
CSS
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.animation-rotate {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
but my code makes it rotate around a wide circle instead of staying centered:
http://codepen.io/CaptnChristiana/pen/hCsHn
HTML:
<svg xmlns="http://www.w3.org/2000/svg" width="399" height="378" viewBox="0 0 399 378"><style type="text/css"><![CDATA[
.st1{fill:none;stroke:#15ADBC;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#15ADBC;stroke:#15ADBC;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:none;stroke:#1D1E1E;stroke-width:8;stroke-linecap:round;stroke-miterlimit:10;}]]></style>
<path class="st1" d="M99.972 180.794l175.591 58.929-123.703 85.748zM45.64 210.785l59.428-127.262-5.096 97.271-54.332 29.991 106.22 114.686 174.202-31.196M105.385 82.349l128.825.633-134.238 97.812M308.37 154.665l17.692 139.61-50.499-54.552 32.807-85.058-73.179-71.466.12 2.235 40.252 154.289"/>
<circle class="st2" cx="105.385" cy="82.349" r="3.263"/>
<circle class="st2" cx="235.191" cy="83.199" r="3.263"/>
<circle class="st2" cx="308.349" cy="154.892" r="3.263"/>
<path class="st2" d="M329.321 294.1c.097 1.799-1.284 3.336-3.084 3.434-1.8.096-3.336-1.283-3.433-3.082-.098-1.803 1.283-3.338 3.082-3.434 1.801-.098 3.339 1.281 3.435 3.082z"/>
<circle class="st2" cx="151.861" cy="325.471" r="3.263"/>
<circle class="st2" cx="46.478" cy="209.807" r="3.263"/>
<circle class="st2" cx="99.973" cy="180.795" r="3.263"/>
<circle class="st2" cx="275.564" cy="239.723" r="3.264"/>
<g class="initials">
<path class="st3" d="M233.525 239.931c4.9.225 10.302-.09 15.021-1.492 14.457-4.304 24.611-19.246 26.432-33.729 1.84-14.646-6.16-28.656-18.408-36.203-15.918-9.807-31.015-3.852-31.015-3.852l-19.523 97.735-25.52-117.075-19.141 93.81c-15.568 4.092-30.443.303-41.066-12.182-14.854-17.457-6.279-37.685-6.279-37.685 11.439-27.958 38.459-25.105 38.459-25.105"/></g></svg>
CSS
@-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
.initials {
-webkit-animation-name: rotate;
-webkit-animation-duration: 4.5s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: linear;
}
+3
source to share
1 answer
Set the property for : transform-origin
50% 50%
.st3 {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
It is worth noting that the initial / default value of the property is . transform-origin
50% 50% 0
+1
source to share