Как повернуть часть элемента

Question

Я знаю, как вращать элемент (в 3D) в CSS, но мне было интересно, можно ли повернуть часть элемента?Я хотел бы «нарезать», чтобы разделить, скажем, на 5 частей и вращать их в 3D одновременно.

Эффект, который я ищу, можно увидеть здесь: https://www.youtube.com/watch?v=O9PvoV2jlco

Но это работапоскольку повернутые рубленые элементы (с обеих сторон) являются изображениями.

Например, если я хочу повернуть два изображения при наведении, и оба изображения разделены на 5 частей, HTML будет:

 <div className="container1">
       <div className="part p01">
               <img className="f1" src='cover.png')} alt=""/>
               <img className="f2" src='cover2.jpg')} alt=""/>
      </div>
</div>

И css будет:

.container1 {
  width: 720px;
  height: 400px;
  background-color: blue;
}

.part {
  width: 20%;
  height: 100%;
  position: absolute;
  transform: rotateY(0deg);
  transform-style:preserve-3d;
  transition: all .5s ease-in;
}

img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top:0px;
  backface-visibility: hidden;
}

.f1 {
  transform: rotateY(0deg);
}
.f2 {
  transform: rotateY(180deg);
}

Это будет 1/5 эффекта, переворачивая 1/5 изображения сверху, чтобы показать изображение на задней части при зависании,Но опять же, это работает только потому, что это изображения.

Конечно, можно просто положить весь элемент за переворачивающимся изображением, но эффект будет не таким приятным.

Если яхотел бы, чтобы задняя часть карты была элементом с шириной 100%, что я мог сделать?

Заранее большое спасибо