Как убрать вертикальный скролл который появляется при вращении картинки

Question

У картинки для вращения такой код

img{
    width: 600px;
    height: 600px;
    animation: 1s linear 0s normal none infinite running rot ;
    -webkit-animation: 1s linear 0s normal none infinite running rot ;
}

@-webkit-keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
@keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}

Answer 1

можно попробовать использовать overflow: hidden;

.images {
    width: 200px;
    height: 200px;
    
    overflow: hidden;
    border: 1px solid black;
    
    text-align: center;
}

img{
    width: 150px;
    _height: 600px;
    animation: 1s linear 0s normal none infinite running rot ;
    -webkit-animation: 1s linear 0s normal none infinite running rot ;
}



@-webkit-keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}
@keyframes rot {
    100% {
      transform: rotate(360deg)
    }
}

<div class = 'images'>
  <img src = 'https://static.wikia.nocookie.net/protagonist/images/6/61/JHOfg4v3-5c2.jpg/revision/latest/scale-to-width-down/340?cb=20141022105959&path-prefix=ru'>
</div>

Answer 2

Как вариант для размышления. При повороте у тебя изображение становиться больше чем твои заявленные 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>

БЛОГ НА HUSL

Как убрать вертикальный скролл который появляется при вращении картинки

Ответы (2 шт):