Question

我知道如何在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％的元素，我该怎么办？

非常感谢

如何旋转元素的一部分

0 个答案: