I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't seem to find a solution. Using @keyframes doesn't seem right in this situation because the picture does not move from one place to another, or am I mistaken? Additionally, when I stop hovering, it returns to its original size without rotating.
Any assistance would be greatly appreciated.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="CSS/stylesheet-7.css"/>
</head>
<body>
<div class="circle">
<img src="Images/hypnotic.png">
</div>
</body>
</html>
Stylesheet:
html {
background: ##99ccff;
}
.circle img {
transition: 6s;
}
.circle img:hover {
transform: rotate(720deg) scale(0.3);
}