Question

我试图使用CSS 3D动画来摆动某些元素，如门。

我希望获得类似9个牌在这个网站上的摆动效果：http://www.ge.com/thegestore

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

任何人都知道如何使用TweenMax或普通的CSS从内部效果中实现摆动？

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）。此属性以及变换的原点和旋转角度会产生摆动门效果。

在下面的代码片段中，我使用了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 2

把它写成答案。

您的问题的解决方案是使用名为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);

Answer 3

在遵循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 4

使用CSS和/或GSAP创建摇摆门效果非常简单。只需确保您使用transform-style，perspective和backface-visibility设置了CSS设置。

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();

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

4 个答案: