Transform rotate how to set the rotation center

Typically, the rotation is the original center point. Which is 50% 50% of the x-axis and y-axis.

If you want to change the location of the Transform-origin is not the origin, you can set the corresponding values. For example: transform-origin:0 0; The center point of the element now becomes the upper-left corner.

It appears that the Transform-origin value is similar to the background-position value. In order to facilitate memory, you can compare the keywords and percent values to remember:

• top = Top Center = center top = 50% 0
• right = right Center = center right = 100% or (100% 50%)
• bottom = Bottom Center = Center bottom = 50% 100%
• left = Left Center = center left = 0 or (0 50%)
• Center = Center Center = 50% or (50% 50%)
• Top left = left top = 0 0
• Right top = top right = 100% 0
• bottom right = right bottom = 100% 100%
• Bottom left = Left bottom = 0 1
• The following code for the mouse moved around the shaking ~ ~ ~

• a:hover{-webkit-animation:swinging 10s ease-in-out 0s infinite;-moz-animation:swinging 10s ease-in-out 0s infinite;Animation:swinging 10s ease-in-out 0s infinite;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;Transform-origin:50% 0;}@-webkit-keyframes Swinging{0% {-webkit-transform:Rotate (0); }5%{-webkit-transform:Rotate (10deg); }10%{-webkit-transform:Rotate ( -9deg); }15%{-webkit-transform:Rotate (8deg); }20%{-webkit-transform:Rotate ( -7deg); }25%{-webkit-transform:Rotate (6deg); }30%{-webkit-transform:Rotate ( -5deg); }35%{-webkit-transform:Rotate (4deg); }40%{-webkit-transform:Rotate ( -3deg); }45%{-webkit-transform:Rotate (2deg); }50%{-webkit-transform:Rotate (0); }/*Come to rest at 50%. The rest is just stillness*/100%{-webkit-transform:Rotate (0); }} @-moz-keyframes Swinging{0% {-moz-transform:Rotate (0); }5%{-moz-transform:Rotate (10deg); }10%{-moz-transform:Rotate ( -9deg); }15%{-moz-transform:Rotate (8deg); }20%{-moz-transform:Rotate ( -7deg); }25%{-moz-transform:Rotate (6deg); }30%{-moz-transform:Rotate ( -5deg); }35%{-moz-transform:Rotate (4deg); }40%{-moz-transform:Rotate ( -3deg); }45%{-moz-transform:Rotate (2deg); }50%{-moz-transform:Rotate (0); }/*Come to rest at 50%. The rest is just stillness*/100%{-moz-transform:Rotate (0); }} @keyframes Swinging{0% {Transform:Rotate (0); }5%{Transform:Rotate (10deg); }10%{Transform:Rotate ( -9deg); }15%{Transform:Rotate (8deg); }20%{Transform:Rotate ( -7deg); }25%{Transform:Rotate (6deg); }30%{Transform:Rotate ( -5deg); }35%{Transform:Rotate (4deg); }40%{Transform:Rotate ( -3deg); }45%{Transform:Rotate (2deg); }50%{Transform:Rotate (0); }/*Come to rest at 50%. The rest is just stillness*/100%{Transform:Rotate (0); }}

Transform rotate how to set the rotation center