Пожалуйста, помогите сделать анимацию со изменением формы объекта как на видео

Question

1 картинка - исходное положение 2 картинка - что получилось в итоге анимации С помощью CSS нужно сделать анимацию что бы картинка так сказать изогнулась как показано на второй картинке. На линии на рисунке не обращайте внимания. Заранее спасибо!

Answer 1

Если я правильно поняла Ваш запрос, то это можно реализовать вот так:

.skew_img {
  width: 150px;
  height: 250px;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  background-image: url("https://ae01.alicdn.com/kf/Hd599eb7fc26f4e368c1acaee7bfd6ffdP.jpg");
  background-position: center;
  background-size: cover;
  animation: skew 10s infinite;
}

@keyframes skew {
  0% {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
  }
  50% {
    clip-path: polygon(20% 0, 100% 0%, 100% 100%, 20% 85%);
  }
}

<div class="skew_img"></div>

P.S. угол скоса регулируется последним значением в clip-path. clip-path: polygon(20% 0, 100% 0%, 100% 100%, 20% 85%);

Answer 2

Учитывая то, что на рисунке изображена схема открывания (по-видимому, створки окна), здесь явно просматривается использование перспективы:

.rama {
  width: 120px; height: 300px;
  perspective: 300px;
  perspective-origin: 100% 0%;
  box-shadow: inset 0 0 1px 1px #444, inset 0 0 1px 100vw #ccc;
  border: 4px inset #ddd;
}
.stvorka {
  position: relative;
  width: 120px; height: 300px;
  transform-origin: 100% 50%;
  box-shadow: inset 0 0 1px 1px #444, inset 0 0 1px 100vw #fff;
  animation: open 4s ease-in-out infinite;
}
@keyframes open {
  0%, 5%, 95%, 100% { transform: rotateY(0deg); }
  45%, 55% { transform: rotateY(-20deg); }
}

/* Необязательные линии */
.line_v { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-image: linear-gradient(to right bottom, #f000 calc(50% - 2px), #f00 50%, #f000 calc(50% + 2px)); }
.line_v::before { content: ''; position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background-image: linear-gradient(to right top, #f000 calc(50% - 2px), #f00 50%, #f000 calc(50% + 2px)); }
.line_h { position: absolute; top: 0; left: 0; width: 100%; height: 50%; background-image: linear-gradient(to right bottom, #f000 calc(50% - 2px), #f00 50%, #f000 calc(50% + 2px)); }
.line_h::before { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right top, #f000 calc(50% - 2px), #f00 50%, #f000 calc(50% + 2px)); }

<div class="rama">
  <div class="stvorka">
    <!-- Необязательные линии --><div class="line_v"></div><div class="line_h"></div><!-- -->
  </div>
</div>

Если чуть дополнить, то выйдет почти презентация (-:

body { margin: 0; min-height: 100vh; background-image: url('https://i.stack.imgur.com/m9NKc.png'),
    radial-gradient(#fff8, #000f); background-position: 0% 0%;
  background-repeat: no-repeat; background-size: auto; display: flex; flex-flow: column nowrap; justify-content: space-around;
  align-items: center; gap: 1em; }

.okno {
  position: relative;
  display: grid; place-items: center;
  height: 700px; width: 325px;
  perspective: 700px;
  box-shadow: 0 0 1px 2px #fc00;
  filter: drop-shadow(0 50px 12px #0008);
}

.rama {
  position: absolute;
  display: grid; place-items: center;
  height: 700px; width: 325px;
  transform-style: preserve-3d;
  transform: rotateX(-45deg) rotateY(-135deg) rotateZ(0deg);
  outline: 1px solid transparent;
  box-shadow: inset 0 0 0 2.5px #ddd, inset 0 0 0 30px #eee, inset 0 0 0 35px #ddd;
  animation: rama 24s ease-in-out infinite;
}
@keyframes rama {
  0%, 100% { transform: rotatey(0deg); }
  25% { transform: rotatey(40deg); }
  75% { transform: rotatey(-40deg); }
}

.stvorka {
  position: absolute;
  display: grid; place-items: center start;
  height: 650px; width: 275px;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  background: 50% 50% / 200%
    linear-gradient(to left top, #0003, #eff5, #0002, #eff4, #0001);
  box-shadow: inset 0 0 0 2.5px #ddd, inset 0 0 0 45px #eee, inset 0 0 0 50px #ddd;
  animation: stvorka 8s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes stvorka {
  0%, 10%, 100% { transform: translate3d(0, 0, -2px) rotateY(0deg); transform-origin: right center; background-position: 50% 50%; }
  25%, 25% { transform: translate3d(0, 0, -2px) rotateY(-45deg); transform-origin: right center; background-position: -100% 0%; }
  40% { transform: translate3d(0, 0, -2px) rotateY(0deg); transform-origin: right center; background-position: 50% 50%; }
  50% { transform: translate3d(0, 0, -2px) rotatex(0deg); transform-origin: center bottom; background-position: 50% 50%; }
  65%, 65% { transform: translate3d(0, 0, -2px) rotatex(8deg); transform-origin: center bottom; background-position: 0% 100%; }
  80%, 99.9% { transform: translate3d(0, 0, -2px) rotatex(0deg); transform-origin: center bottom; background-position: 50% 50%; }
}

.ruchka {
  position: absolute;
  display: grid; place-items: start center;
  height: 75px; width: 15px;
  border-radius: 1000px;
  transform-style: preserve-3d;
  transform-origin: 50% 7px;
  transform: translate3d(15px, -6px, -25px) rotatez(0deg);
  background-image: linear-gradient(to top, #eee, #ddd, #eee);
  box-shadow: inset 0 -5px 2px 2px #ddd;
  animation: ruchka 8s cubic-bezier(0.4, 0, 0.4, 1) infinite;
}
@keyframes ruchka {
  0%, 95%, 100% { transform: translate3d(15px, -6px, -25px) rotatez(0deg); }
  10%, 40% { transform: translate3d(15px, -6px, -25px) rotatez(-90deg); }
  50%, 75% { transform: translate3d(15px, -6px, -25px) rotatez(-180deg); }
}
.ruchka::before,
.ruchka::after {
  content: "";
  position: absolute;
  height: 15px; width: 24px;
  background-color: #eee;
  box-shadow: inset 4px 0px 3px -3px #bbb4, inset -4px 0px 3px -3px #ccc8;
  transform-origin: center center;
  transform: rotateY(90deg) translate3d(-12px, 0px, 0px);
}
.ruchka::after {
  rotate: z 90deg;
}

<div class="okno">
  <div class="rama">
    <div class="stvorka">
      <div class="ruchka"></div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Пожалуйста, помогите сделать анимацию со изменением формы объекта как на видео

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