创建一个像门一样摆动的 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 和/或 GSAP 制作旋转门效果非常简单。只要确保你的 CSS 设置正确，transform-style、perspective 和 backface-visibility。

GSAP 平开门示例：

http://codepen.io/jonathan/pen/NxVMBx

HTML 标记：

<div id="cardWrapper">
   <div class="card">
      <div class="cardFace front"><p>FRONT</p></div>
      <div class="cardFace back"><p>BACK</p></div>
   </div>
</div>

JS GSAP：

// 3D Swinging Door GSAP

// setup initial CSS properties
TweenLite.set("#cardWrapper", {perspective: 1000 });
TweenLite.set(".card", { transformStyle: "preserve-3d" });
TweenLite.set(".back", { rotationY: -180 });
TweenLite.set([".back", ".front"], { backfaceVisibility: "hidden" });

// create new timeline in paused state
var tl = new TimelineMax({
   paused: true
});

// swinging door tween
tl.to(".card", 0.6, {
   rotationY: 180, 
   transformOrigin: "100% 0%", 
   ease: Cubic.easeOut
});

tl.progress(0).progress(1); /* pre-record property values */
tl.play();

Answer 2

在遵循 Tamir Ahmed 的使用 transformPerspective 的建议后，我得到了这个工作。

这是更新后的 TweenMax JS：

TweenMax.set('#flip-me',{
rotationX: -90,
transformOrigin: "0 0",
transformPerspective: '1000'
});

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

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

完整演示请参见 JSFiddle：https://jsfiddle.net/0a0osq6a/4/

Answer 3

这是一个使用纯 CSS 的解决方案。关键属性再次是 perspective（相当于 Tahir Ahmed 的回答中描述的 transformPerspective）。此属性与变换的原点和旋转角度一起产生摆动门效果。

在下面的 sn-p 中，我使用 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>

Answer 4

把它写成答案。

您的问题的解决方案是使用名为transformPerspective 的属性。

透视 CSS 属性确定 z=0 平面和用户之间的距离，以便为 3D 定位的元素提供一些透视

Link.

transformPerspective 仅影响正在动画的元素，使其看起来好像在自己的 3D 空间中具有自己独特的消失点。

...

应将透视应用于动画元素的父元素 - 元素的透视会影响其所有子元素，允许它们共享一个共同的消失点

Link.

以这个 updated fiddle 为例。希望这会有所帮助。

JavaScript：

TweenMax.set(document.body, { margin: 0, padding: 0, overflow: 'hidden' });

TweenMax.staggerFromTo('.flip-me', 0.8, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  yPercent: -50,
  xPercent: -50,
  width: 100,
  height: 100,
  textAlign: 'center',
  rotationX: 90,
  transformOrigin: 'top center',
  transformPerspective: 400,
  backfaceVisibility: 'hidden',
  cycle: {
    x: [-200, -100, 0, 100, 200],
    backgroundColor: ['#c00', '#0c0']
  }
}, {
  repeat: -1,
  yoyo: true,
  rotationX: 0,
  ease: Power2.easeInOut
}, 0.1);