Menu
I have the following letters ABC as shown below:
<body>
<div id="container">
<div id="shape" class="spin">
<div id="A" class="plane">A</div>
<div id="B" class="plane">B</div>
<div id="C" class="plane">C</div>
</div>
</div>
What I want is each letter to spin around its x-axis?
I tried (for letter C):
#C {
-webkit-animation: spinAboutItsCentre 8s linear;
}
@-webkit-keyframes spinAboutItsCentre {
from {
-webkit-transform: rotateX(0);
}
to {
-webkit-transform: rotateX(360deg);
}
}
but the letter C moves over to where the letter A is an spins it its axis.
Any ideas?
JD
690
It should look something like this, you need to specify your transform-origin properties; x-%, y-%, and z-px.
Notice spinning about the Y-axis creates a bit of offset because the engine's interpretation of the character's position originates at the "beginning" (side) of the object, not the center of the object.
The 0% and 100% designations represent your "from" and "to" clauses, this format allows you to add as many of these lines as you wish to increment the movement over your specified timeframe (i.e. 25% rotate 90deg, 50% rotate 180deg, 75% rotate 270deg, 100% rotate 360deg).
@-webkit-keyframes spinX
{
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;}
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;}
}
@-webkit-keyframes spinY
{
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;}
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;}
}
Try these styles, they should work alright.
#Ca
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinX 8s infinite;
}
#Cb
{
position: absolute;
left: 20%;
font-size:72px;
-webkit-animation: spinY 8s infinite;
}
<div id="Ca">C</div>
<div id="Cb">C</div>
Transforms have a "transform-origin" associated with them. When no transform origin is specified, it is automatically set at (50%, 50%) of the element. When your exact code is entered as a jsfiddle, it works as intended.
My guess is that in your complete code you have specified a transform origin incorrectly or have other weirdness in the base CSS for your class.
Update: So, yes, you had weirdness in the base CSS. It would be helpful to see your complete CSS and HTML for debugging.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
