Как вариант для размышления.
При повороте у тебя изображение становиться больше чем твои заявленные 600 пикселей, поэтому появляется скролл.
Как вариант - обернуть картинку в блок, задать блоку overflow:hidden
, ну и что-бы концы не обрезались у картинки, можно задать чуть больше размеры блоку-обертке и расположить картинку по центру.
img{
width: 100px;
height: 100px;
animation: 1s linear 0s normal none infinite running rot ;
-webkit-animation: 1s linear 0s normal none infinite running rot ;
}
.img-wrapper{
overflow: hidden;
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
@-webkit-keyframes rot {
100% {
transform: rotate(360deg)
}
}
@keyframes rot {
100% {
transform: rotate(360deg)
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="img-wrapper">
<img src = 'https://lh6.googleusercontent.com/LIcZTDgp1JS321UIWoGjO1FtJMnfYxGm6ZQvi_kbC-0v7jkqnwVo35R7Nin6rpealtLg5PykvUTOz-PnZNrV1eLf52Rbv85aZLo-rmAGUXh8TnLbGt22h4QwSTQn2mju6Z8J8qlzlsnMFkmpFg'>
</div>
</body>
</html>