I want to rotate the image and animate accordingly, can someone help me out, below is the link for the gif image
https://drive.google.com/file/d/0B92S5c2PO_OIeUZJU0g2dnY3S3c/view?usp=sharing
Here is a solution
http://jsfiddle.net/aquadk/m23sadrz/
CSS
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
HTML
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
Related
I have a gear image rotating using keyframe spin of CSS. but I want to resize the width of the image less than the height like in the image (see gear image below).
Demo gear rotating
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
You can make use of the ScaleX transform value at various keyframe steps. It resizes at the last step to show you the difference in the size of it.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
0% {
transform: scaleX(0.5) rotate(360deg);
}
50% {
transform: scaleX(0.5) rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
#m4n0's answer works well. An alternate approach to timing rotations is to simply wrap .gear with another element, and transform the containing element:
<div class="gear__wrapper">
<img class="gear" />
</div>
.gear__wrapper {
transform: scaleX(0.5);
}
It might be handy but if you are expecting something else, you might need to time the rotations and all.
I have only added the simple, please other prefixes.
.gear {
position: absolute;
top: 10%;
left: 10%;
width: 120px;
height: 120px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin linear 4s infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg) scaleX(1);
}
50%{ transform: rotate(180deg) scaleX(0.5);
}
<img class="gear" src="https://i.imgur.com/v1eydp4.png">
I have looked at the previously answered topics on the site. I could not adjust. Although I've set the size and location in the css file. The big visual is right in the middle and it becomes suitable for the screen. Imaged1 class I have given a small visual display in different places and different sizes. Can the codes help?enter image description here
.imaged1 {
position: absolute;
top: 80px;
left: 240px;
width: 65px;
height: 65px;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
enter image description here
enter image description here
Following code may help you:
<div style="text-align: center;position: relative;width:50%;">
<img class="center" img src="https://i.ibb.co/BsDB7nW/1.png">
<img class="imaged1" src="https://i.ibb.co/7p3bYLN/d1.png">
</div>
.imaged1 {
position: absolute;
top: 36%;
left: 40%;
width: 19%;
margin: 0 auto;
-webkit-animation: spin 15s linear infinite;
-moz-animation: spin 15s linear infinite;
animation: spin 15s linear infinite;
bottom: auto;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.center {
display: block;
width: 100%;
}
Please check this fiddle for my best guess what you require
And here is the previously asked question
I want to spin the below image to 360 degree and below css applied on that image:
<img src="" alt="" />
CSS:
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
It's working on desktop well but not on mobile? If I have done anything wrong?
This works for me both on mobile and desktop.
.loader {
position: absolute;
width: 120px;
height: 120px;
left: 0; right: 0;
top: 0; bottom: 0;
margin: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
-webkit-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Your spin code might be not working because you haven't coded that correctly. There are some issues in the #keyframes animation.
SEE THE EXAMPLE
Is it possible to circularly animated this image?
I attempted to animate it by creating a relative parent and setting each image (business solutions div, it solutions div, lifecycle solutions div and education solutions div to absolute). I used this code, #keyframes rotate {
0%{
transform: rotate(0deg); }
100%{
transform: rotate(360deg); }
}
and it rotated in different behavior. They rotated on their own place.
I want to animate it in such a way that: the 4 services will circularly move. Except the outer and inner texts. Thank you in advance.
Here's a quick demo of the general pricipal.
.box {
width: 200px;
height: 200px;
margin: 5em auto;
border: 1px solid grey;
position: relative;
-webkit-animation: spin 10s infinite linear;
animation: spin 10s infinite linear;
}
.object {
position: absolute;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background: plum;
top: 25px;
left: 25px;
-webkit-animation: spin 10s infinite reverse linear;
animation: spin 10s infinite reverse linear;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
<div class="box">
<div class="object">Text</div>
</div>
You will need at least two elements. The static one must have have transparent areas so that it can sit over or behind the rotating div.
To rotate the div:
div.your-rotating-element {
animation-name: rotate-div;
/*enter other styles*/
animation:spin 4s linear infinite;
}
#-moz-keyframes rotate-div { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); } }
#keyframes rotate-div { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.ball{
position:absolute;
top: 200px;
left: 300px;
height:100px;
width:100px;
background-color: yellow;
border-radius: 100px;
-webkit-animation: balls 4s linear;
animation: balls 4s linear;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes balls {
0% { transform: rotate(0deg) translateX(150px) rotate(0deg); }
100% { transform: rotate(0deg) translateX(150px) rotate(360deg); }
}
#keyframes balls {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
The above was my code to rotate in the circuar motion. I want my start and end degree as same and also it should rotate in the circular motion. Please help me with the solution to my problem
I would use this code to rotate a image (it never stops):
.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
If you just want 360 degrees, delete the word infinite and it should work.
EDIT: Here a Demo
Have found solution for my problem.
By having 'from' degree we can calculate the 'to' degree as 'from+359' so it will rotate a whole round by having the single degree