仅使用CSS创建盒子翻盖效果

Question

仅使用CSS创建盒子翻盖效果

htmlcsscss-transitionscss-transforms

11

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

存在两个问题：

关闭盒子的顺序与打开的顺序相同。有没有办法以与其打开相反的顺序关闭盒子，使得盒子在关闭时回到与关闭前相同的状态？
由于红色和蓝色瓣片的关系，绿色和黄色瓣片的末端在转换期间被隐藏了，因此它看起来不是3D的。有没有一种方法可以以3D方式显示所有瓣片？

如果可能的话，请使用纯CSS解决方案，不要使用JavaScript。

#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);
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="box">
      <div id="flap1"></div>
      <div id="flap2"></div>
      <div id="flap3"></div>
      <div id="flap4"></div>
    </div>
  </body>
</html>

- Dhruv Chadha

我认为你做不到。只需添加另一个类或其他内容。
你可以使用CSS3 perspective。

- Mosh Feu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

对于问题1：

如果你在:hover选择器中按顺序设置延迟，并在默认选择器中按相反顺序设置延迟，就可以实现完全相反的动画效果。

对于问题2：

解决方法和说明如下：

在部分过渡时间内，绿色和黄色方块看起来没有3D效果，因为有几个元素具有更高的z-index，被放置在上面。这阻止了拉伸区域（由于透视旋转）的显示，因此它看起来只有2D效果（但实际上不是）。为了解决这个问题，我们需要指示浏览器保留变换的3D效果。这可以通过使用transform-style：preserve-3d来完成。
当我们执行上述操作时，所有的翼板都将以3D效果打开，但在动画开始和结束时，蓝色翼板实际上会出现闪烁。看起来好像是因为z-index在使用3D变换时失去了效果，在失去z-index效果和开始preserve-3D效果之间有很小的时间差，在这段时间内，蓝色翼板暂时会被放在后面。为了解决这个问题，需要添加translateZ（1px）的3D等效于z-index：1。Z轴上的平移将元素向你的眼睛靠近1像素，并使其保持在黄色和绿色翼板之上。
最后，尽管进行了以上所有操作，但在悬停动画结束时，仍然存在一个小故障，绿色翼板会从蓝色翼板中显示出来。为了解决这个问题，我稍微改变了延迟时间。

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

#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;
}

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