How to rotate in CSS3 around the source?
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> I want each letter to rotate around the x axis?
I tried (for the 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 will move to where the letter A is the spin of its axis.
Any ideas?
Jd
It should look something like this: you need to specify your transform-origin properties; x-%, y-% and z-px.
Note that rotation around the Y axis creates an offset bit, because the interpretation of the character position engine starts from the "beginning" (side) of the object, not the center of the object.
The designations 0% and 100% represent sentences from "from" and "to", this format allows you to add as many lines as you want to increase the movement on the specified time frame (i.e. 25% rotate 90 degrees, 50% rotate 180 degrees, 75% rotate 270 degrees, 100% rotate 360 degrees).
@-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 fine.
#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> Transformations have the “origin of transformation” associated with them. If no transformation source is specified, it is automatically set to (50%, 50%) of the element. When your exact code is entered as jsfiddle, it works as intended.
My hunch is that in your full code, you didn’t correctly indicate the origin of the transform or had another weirdness in the base CSS for your class.
Update: So yes, you had weirdness in basic CSS. It would be helpful to see your full CSS and HTML for debugging.