Как скрыть лишнюю часть анимации

Question

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

@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;}

Answer 1

Во-первых, классы нельзя называть только цифрами. Во-вторых, если нужно срезать что-то, то для родительского блока нужно указать размеры и 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>

БЛОГ НА HUSL

Как скрыть лишнюю часть анимации

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