html - CSS3 旋转和平移 2 个盒子

Question

我有 2 个盒子(200 像素 X 200 像素)，我想用 CSS 动画为它们设置动画。首先(上框)需要从 rotateX(0deg) 到 rotateX(90deg) 设置动画，我使用 transform-origin: center top。我希望第二个框跟随第一个框的底线，所以我将这个框从 translateZ(0px) translateY(0px) 动画化为 translateZ(200px) translateY(-200px)。这仅在动画的开始和结束时有用。示例在此链接上 Animation example .如何做到这一点，方框才不会在动画开始和结束之间分崩离析？

在示例中，我只使用 -webkit- 和 -moz- 前缀。

JSFIDDLE

HTML

<div class="box box-1"></div>
<div class="box box-2"></div>

CSS

body{
    padding: 200px 0 0 0;
    margin: 0;
    background-color: orange;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1000px;

    -moz-transform-style: preserve-3d;
    -moz-perspective: 1000px;
}
.box{
    height: 200px;
    width: 200px;
    margin: 0 auto;
    -webkit-transform-origin: center top;

    -moz-transform-origin: center top;
    opacity: 0.7;
}
.box-1{
    background-color: blue;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: boxOne;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

    -moz-animation-duration: 3s;
    -moz-animation-name: boxOne;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
}
.box-2{
    background-color: purple;
    -webkit-animation-duration: 3s;
    -webkit-animation-name: boxTwo;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

    -webkit-animation-duration: 3s;
    -webkit-animation-name: boxTwo;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
}





@-webkit-keyframes boxOne{
  from {
    -webkit-transform: rotateX(0deg);
  }

  to {
    -webkit-transform: rotateX(90deg);
  }
}


@-webkit-keyframes boxTwo{
  from {
    -webkit-transform: translateZ(0px) translateY(0px);
  }

  to {
    -webkit-transform: translateZ(200px) translateY(-200px);
  }
}



@-moz-keyframes boxOne{
  from {
    -moz-transform: rotateX(0deg);
  }

  to {
    -moz-transform: rotateX(90deg);
  }
}


@-moz-keyframes boxTwo{
  from {
    -moz-transform: translateZ(0px) translateY(0px);
  }

  to {
    -moz-transform: translateZ(200px) translateY(-200px);
  }
}

Answer 1

这是一个相当复杂的动画。您可能需要研究不同的翻译缓动方法。如果将问题简化到 2D 平面上，顶部元素高度会增加，但增长率会随着时间的推移而增加。您可以对第二个元素的动画应用缓动来模拟这种随时间的增加。查看这些是否有帮助:http://easings.net/ easeInCirc 可能是最接近(如果不是完全)您需要的。