html - 创建像门一样摆动的 CSS3 3D 旋转

Question

我正在尝试使用 CSS 3D 动画在某些元素(如门)中摆动。

我想在这个网站上实现 9 block 瓷砖摆动的效果:http://www.ge.com/thegestore

现在我可以使用 TweenMax 库获得旋转效果，但不太正确。我的元素在顶部旋转，而不是从内部旋转。

有人知道如何使用 TweenMax 或仅使用常规 CSS 来实现从内部摆动的效果吗？

查看代码:https://jsfiddle.net/0a0osq6a/3/

TweenMax.set('#flip-me',{
  rotationX: 180,
  transformOrigin: "top center"
});

var tl = new TimelineMax({repeat:0, repeatDelay: 0});

tl.add (TweenMax.to("#flip-me", .8, {
  css: {
    rotationX: 0,
    transformOrigin: "top center"
  },
  ease: Cubic.easeInOut
}));
tl.play();

Answer 1

这是一个使用纯 CSS 的解决方案。关键属性还是 perspective(相当于 Tahir Ahmed 的回答中描述的 transformPerspective)。此属性与变换的原点和旋转 Angular 一起产生旋转门效果。

在下面的代码片段中，我使用了 CSS 动画来自动触发旋转门效果，但我们可以在用户操作(如 :hover)发生时将其添加到元素中。

div {
  float: left;
  height: 200px;
  width: 50%;
  line-height: 200px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
}
.top {
  transform-origin: top; /* equivalent to 50% 0% */
  transform: perspective(200px) rotateX(-90deg);
  animation: swing 1s cubic-bezier(0.75,0.4,1,1) forwards 1s;
  /* animation syntax - [name] [duration] [timing-function] [fill-mode] [delay] */
}
.bottom {
  transform-origin: bottom; /* equivalent to 50% 100% */
  transform: perspective(200px) rotateX(90deg);
  animation: swing 1s cubic-bezier(0.75,0.4,1,1) forwards 1s;
}
.left {
  transform-origin: left; /* equivalent to 0% 50% */
  transform: perspective(200px) rotateY(90deg);
  animation: swing 1s cubic-bezier(0.75,0.4,1,1) forwards 1s;
}
.right {
  transform-origin: right; /* equivalent to 100% 50% */
  transform: perspective(200px) rotateY(-90deg);
  animation: swing 1s cubic-bezier(0.75,0.4,1,1) forwards 1s;
}
@keyframes swing {
  to {
    transform: perspective(200px) rotateX(0deg);
  }
}
@keyframes swing-alt {
  to {
    transform: perspective(200px) rotateY(0deg);
  }
}

<div class='top'>This swings from the top</div>
<div class='bottom'>This swings from the bottom</div>
<div class='left'>This swings from the left</div>
<div class='right'>This swings from the right</div>