我知道如何在css中旋转元素（在3D中），但我想知道是否可以旋转元素的一部分？我想“切”到元素说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％宽度的元素，我该怎么办？

非常感谢提前

css rotation