Как сделать такую фигуру на svg?

Question

Как можно сделать такую фигуру на SVG, чтобы белая часть (пластина) крутилась в черной рамке? И реально ли так вообще сделать? Угол наклона нужен такой, как справа.

Answer 1

Если устраивает CSS, то почему бы и нет?

* { margin: 0; padding: 0; } body { background: url("https://i.stack.imgur.com/m9NKc.png") 0% 0% no-repeat #ed3430; height: 100vh; display: flex; flex-flow: row nowrap; justify-content: space-around; justify-content: space-evenly; align-items:center; }

.outer {
  height: 96px;
  width: 294px;
  border: 19px solid #000;
  perspective: 20000px;
  transform-style: preserve-3d;
  transform: rotateX(-32deg) rotateY(-48deg);
}
.inner {
  height: 100%;
  transform: rotateY(0deg);
  background: rgba(255, 255, 255, .9);
  -webkit-animation: rotate 5s linear infinite;
  animation: rotate 5s linear infinite;
}

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

<div class="outer">
  <div class="inner"></div>
</div>

БЛОГ НА HUSL

Как сделать такую фигуру на svg?

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