0

Как скрыть вылезающую часть анимации при повороте ? Когда квадрат на ребро становится , он выходит за размер секции

@keyframes rotate {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

.header__square-pic {
  height: 568px;
  width: 568px;
  background-color: #2f80ed;
 position: absolute;
  right: 0px;
  top:64px;
  z-index: 0;
  animation: rotate 20s infinite  linear;}
введите сюда описание изображения

4
  • codepen.io/camobap6/pen/eYpqdjN. Когда квадрат на ребро становится , справа за ширину страницы вылезает угол (на скриншоте граница серая)
    – user389240
    30 мая 2020 в 1:51
  • Не , у меня по заданию сделать именно rotate и что бы скрылось.
    – user389240
    30 мая 2020 в 2:01
  • не , там ничего нет ) просто задание такое задали =)
    – user389240
    30 мая 2020 в 2:03
  • Да вроде ничего не мешает.Я извиняюсь , но я не понял как обернуть и overflow поставить. Не сталкивался еще с таким.
    – user389240
    30 мая 2020 в 2:06

1 ответ 1

0

Во-первых, классы нельзя называть только цифрами. Во-вторых, если нужно срезать что-то, то для родительского блока нужно указать размеры и overflow.

@keyframes rotate {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

.one {
  width: 1000px;
  height:900px;
  overflow: hidden;
  position: relative;
}

.header__square-pic {
  height: 568px;
  width: 568px;
  background-color: #2f80ed;
 position: absolute;
  right: 0px;
  top:64px;
  z-index: 0;
  animation: rotate 20s infinite  linear;
}
 
<section class="one">
<div class="header__square-pic"></div>
</section>

1
  • Благодарю. То что нужно.
    – user389240
    30 мая 2020 в 2:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.