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

Question

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

Dhr*_*dha 11 html css css3 css-transitions css-transforms

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

有两个问题:

框关闭的顺序与打开的顺序相同.无论如何要按照开口的相反顺序关闭盒子,以便盒子以与关闭时相同的状态返回？
由于红色和蓝色的襟翼,绿色和黄色襟翼的末端在过渡期间被隐藏,因此它看起来不是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);
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Har*_*rry 8

问题1:

如果你给在正向次序延迟:hover选择和默认的选择范围内以相反的顺序,将实现完全相反的动画.

问题2:

修复和解释如下:

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

(与我最初提到的相反,这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;
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，5 月前
查看次数：	1983 次
最近记录：	9 年，5 月前