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

Question

我正在尝试使用CSS 3D动画来摆动一些像门一样的元素.

我希望在这个网站上实现9个瓷砖如何摆动的效果: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(这相当于transformPerspectiveTahir Ahmed的回答中描述的).此属性以及变换的原点和旋转角度产生摆动门效果.

在下面的片段中,我使用了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>