Bob James Bob James - 3 months ago 14
CSS Question

clock rotating 360 degrees not working

Suppose I have an image of a clock, and I want it to be rotating 360 degrees with the help of css. However, even though I have the

transform: rotate(360deg)
property, my clock is still not rotating.

Here is my basic code.

HTML

<div id="clock"></div>


CSS

#clock {
border-radius: 100px;
height: 79px;
width: 79px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAAflBMVEX///9FNzdBMjLIxcU8KyvLyMhCNDQ+Li46KipdUVE3Jib49/f08/P9/Pzx8PA1IiK2sbHa2Njq6OhIOjpxZ2esp6dNQEDBvb2impqRiYno5uaKgYF6cnKnoKBkWlpTR0fe3NyFe3udlZWNhYW8uLhjWFhsYWEvGxssFRUnDw/st+yGAAAFCElEQVRYhd1Y2baiOhDFMASCyDwoMyqe/v8fvKmCI6AhYLtWP9x6cEkM20pl16go/1xOF1/XdVXlH/7l9CWY7XtdG1lhSBgjYWhFbef59l/DXa5VHZqUGIdRDELNsK6ul79BC+LanWFNwlHdOg4+hGvims0UI4RS/jGtsCRuPoA7lpU2vmxQ5oZ9X+R50fchY/R3XavK4148vzqQQTPzQfNbE5xOR9s+nk5Bc8vJwxw0JUbl74I7ndkAR5O+fJr/+FTnUvbJoCdh5x008gsTz0Tra+r8LjpqVKjTU3qtKW7Sik0l9VpD9dzznG/NXdPuzfRs+2cXldRqXY6X1gQvsZ70wb/hq5o6X3HUgQakTmV4MRqHJKWzXH8H5JBlgn9O43U8D++PWurrDyJARVEtilzw1vB0xNOid0OLARU/0hBxxY6+BUcwI4GnrgAqlwgoQSzhXV8iOIDZioLJGqBit4BIRUo4Z1Cf9sLgtAqo2D2ooZ2dt19S+IHMybYLkFMUDEXfyQMcMA7il2SAispf40x7XT6DLYw1SskAlRi4YZ6Xi37NV2mxFt2lgHbBrWXUi5t2OrCgu+rpUkDFd8GK3fxeGqCgeV17YwNQuZpAxmamYMa40sl6cNsAPCXcYGymYgAW1LJ3Lu0EdDK04pS4UvZm1Y8AudeCihMXI76f5pIEvgVo51xFEj01/uG3FK4GoR2AihdyiJ/fJ5XBJcnKgU3AC9DE/Q1jHQ8LpJBs3wZUCuBdNz6ACc3sO8DMnIwYQLxwm+8AGxdi1UAcHVj4kO3eAag8gHmDEVPOcyP8FjDkIMnARA8ia/8tYA9xdqBeyUlJ228BW0Ap8Ss4Ij1Ld+8APAPKQJWM01DrpLtjvtuUAwKZtQGwM7domIYQz+WAQMSR2ZtH1n8gDRXysnp25BJjjQQPKrKV6mASjDfDpcSG1JUx8Rp0q7IEZx6zJoQeYq1tRMc0XGkVCALhZgyB6Hruyr5jAtE92cRT3Mn1GojfD7HJT5hzQ2893YwSgC+Pic+puLbsJsS7QlXgvha0ArlBkK7Gfeg1oqTsdOCgTO6Wg1zn/utxThqVIEedoSQg1239FHtxSjx/8uYITox47Z4eWcWY+twJiZ+8efMNHS7a1Xdipp9Kug4TwkvaU6FiJHRXD3+J5jmKP2NZu7xnn5Gt5DrJDcvpaa/dYuJftKs55FZro/Ea5Yilx7zcT7FvW7gDL+8FFyWWFPvD+evoEMs62aePP9sONwhYmxYLa2MIXdbJ9r72WhnqcyNc/vtYJ+8z2Yvowvoc6+Q36uwRpIygPr9ijyXoiDbEgdh/YO+h4FhhIyDPfgLp8GiVYEKCpjg8ZHWnQLzHYdX4MQ4bku1gOonjJTh6EHdgTssAMZS0/G86ANt4wFzTocCW3xW2zAKxWxyN0PWMeWxxHMMEQwKB+BHDAU8rGVkFOSISK9uMgkGGEwVeIki3jqcwiLVx255lGPvsk+E05kBYna7G1lNaD/MxkkiLrEHUno4zwugmGo/a/i0aZ4u03xXfLuNc60A0Ky/1hYkCvcwtjRzG+dhO13fShI3vUFLfo7Ysb6p6K8s2utdkHEkSlqT7XcDxemMckBqEUM1kXEyNkuei0X/iUVyOcRGagpEuwplhEe+elz4l0LPaNckrGjHdOtM/HRIP4gR+d//jMhNHxIRSk7l/7p0ffBw0F9KkJY6Iizwv0+YrqP+p/AdFLkaHLHtZJgAAAABJRU5ErkJggg==');
}
#clock:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}


I have a jsfiddle that shows how my clock should look like.

Please explain why my clock is not rotating and fix the error.

Answer

I have updated your jsfiddle.

Please look at the transition property link also.

Your clock was rotating 360 degrees, which means after you hovered on it, you were going to get the same result. To look at the clock rotating, you would have to add a css transition property.

This is the updated code.

#clock {
    border-radius: 100px;
    height: 79px;
    width: 79px;
    transition: 2s; /*or however many seconds you want it*/
    background: url('https://s3.postimg.io/3k6hhoafn/download.png');
}
#clock:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}