Question

我尝试使用过渡创建此效果。看起来你应该打开一个盒子。

有两个问题：

框关闭的顺序与打开时的顺序相同。无论如何要按照开口的相反顺序关闭盒子，以便盒子以与关闭时相同的状态返回？
由于红色和蓝色的襟翼，绿色和黄色襟翼的末端在过渡期间被隐藏，因此它看起来不像3D。有没有办法以3D方式显示所有襟翼？

我更愿意，如果解决方案是纯CSS，请不要使用JavaScript。

FragmentA

#box {
  position: relative;
  top: 170px;
  left: 170px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  perspective: 800px;
} 
#flap1, #flap2, #flap3, #flap4 {
  position: absolute;
}
#flap1 {
  background-color: red;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 0 0;
  transition: transform 1s;
}
#flap2 {
  left: 150px;
  background-color: blue;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform-origin: 100% 0;
  transition: transform 1s ease 0.3s;
}
#flap3 {
  background-color: green;
  width: 300px;
  height: 150px;
  transform-origin: 0 0;
  transition: transform 1s ease 0.6s;
}
#flap4 {
  background-color: yellow;
  top: 150px;
  width: 300px;
  height: 150px;
  transform-origin: 0 100%;
  transition: transform 1s ease 0.9s;
}
#box:hover #flap1{
  transform: rotateY(-170deg);
}
#box:hover #flap2{
  transform: rotateY(170deg);
}
#box:hover #flap3{
  transform: rotateX(170deg);
}
#box:hover #flap4{
  transform: rotateX(-170deg);
}

Answer 1

问题1：

如果您按照:hover选择器的正向顺序给出延迟，并且在默认选择器中以相反的顺序给出，它将实现精确的反向动画。

问题2：

修复和解释如下：

对于过渡时间的一部分，绿色和黄色框看起来不像3D效果，因为有一些元素的z-index位于上方。这可以防止拉伸区域（由于透视旋转）显示，因此看起来它只是2D（实际上它不是）。为了克服这个问题，我们需要指示浏览器保留转换的3D方面。这是使用transform-style: preserve-3d完成的。
当我们执行上述操作时，襟翼将全部以3D效果打开，但在动画开始及其结束附近，当转换实际开始并结束蓝色襟翼时，我们将看到蓝色襟翼上的闪烁。这似乎是因为z-index在使用3D变换时会失效，并且在z-index效果丢失与preserve-3D效果开始之间存在少量时间蓝色的皮瓣暂时落后了。为解决此问题，添加了z-index: 1（即translateZ(1px)）的等效3D。 Z轴的平移使元素与您的眼睛相距1px并使其保持在黄色和绿色襟翼之上。
最后，尽管如此，在悬停动画结束时仍有一个小故障，绿色翻盖透过蓝色翻盖显示。为了解决这个问题，我稍微改变了延迟时间。

（与我最初提到的相反，translateZ(0px)不是必需的，可以删除。）

＆＃13;

#box {
  position: relative;
  top: 170px;
  left: 170px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
  perspective: 800px;
  transform-style: preserve-3d;
}
#flap1, #flap2, #flap3, #flap4 {
  position: absolute;
}
#flap1 {
  background-color: red;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform: translateZ(1px);
  transform-origin: 0 0;
  transition: transform 1s 1.5s;
}
#flap2 {
  left: 150px;
  background-color: blue;
  width: 150px;
  height: 300px;
  z-index: 1;
  transform: translateZ(1px);
  transform-origin: 100% 0;
  transition: transform 1s ease 1s;
}
#flap3 {
  background-color: green;
  width: 300px;
  height: 150px;
  transform-origin: 0 0;
  transition: transform 1s ease 0.5s;
}
#flap4 {
  background-color: yellow;
  top: 150px;
  width: 300px;
  height: 150px;
  transform-origin: 0 100%;
  transition: transform 1s ease;
}
#box:hover #flap1 {
  transform: rotateY(-170deg) translateZ(1px);
  transition: transform 1s ease;
}
#box:hover #flap2 {
  transform: rotateY(170deg) translateZ(1px);
  transition: transform 1s ease 0.5s;
}
#box:hover #flap3 {
  transform: rotateX(170deg);
  transition: transform 1s ease 1s;
}
#box:hover #flap4 {
  transform: rotateX(-170deg);
  transition: transform 1s ease 1.5s;
}

＆＃13;

<div id="box">
  <div id="flap1"></div>
  <div id="flap2"></div>
  <div id="flap3"></div>
  <div id="flap4"></div>
</div>

＆＃13;

仅使用CSS创建盒盖打开效果

1 个答案: