应用CSS3动画时失去了视角

时间：2015-10-26 11:16:45

标签： css css3 css-animations css-transforms perspective

我正在尝试将CS​​S3转换应用于某些HTML元素，并注意到每当我尝试将关键帧动画应用于元素时，perspective都会消失。

我正在放置两个屏幕，一个在添加动画之前（1），另一个在添加动画之后（2）。

添加动画之前： 

ul {
  width: 500px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  -o-perspective: 300px;
  perspective: 300px;
  transform: none;
}
ul li {
  display: inline-block;
  width: 60px;
  height: 200px;
  background: #333;
  margin: 0;
  padding: 0;
  -webkit-transform: rotate3d(1, 0, 0, 60deg);
  -moz-transform: rotate3d(1, 0, 0, 60deg);
  -o-transform: rotate3d(1, 0, 0, 60deg);
  transform: rotate3d(1, 0, 0, 60deg);
  box-shadow: 0px 0px 25px #666;
  z-index: 2
}
li:nth-child(1),
li:nth-child(3) {
  background: #666;
  width: 200px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Demo - Before animation is added

添加动画后 

ul {
  width: 500px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  -o-perspective: 300px;
  perspective: 300px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: none;
}
ul li {
  display: inline-block;
  width: 60px;
  height: 200px;
  background: #333;
  margin: 0;
  padding: 0;
  -webkit-transform: rotate3d(1, 0, 0, 60deg);
  -moz-transform: rotate3d(1, 0, 0, 60deg);
  -o-transform: rotate3d(1, 0, 0, 60deg);
  transform: rotate3d(1, 0, 0, 60deg);
  box-shadow: 0px 0px 25px #666;
  z-index: 2
}
li:nth-child(1),
li:nth-child(3) {
  background: #666;
  width: 200px;
}
li:nth-child(1) {
  -webkit-transform-origin: right center;
  -moz-transform-origin: right center;
  -o-transform-origin: right center;
  transform-origin: right center;
  -webkit-animation: wing1 1s infinite;
  -moz-animation: wing1 1s infinite;
  -o-animation: wing1 1s infinite;
  animation: wing1 1s infinite;
}
li:nth-child(3) {
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
  -webkit-animation: wing2 1s infinite;
  -moz-animation: wing2 1s infinite;
  -o-animation: wing2 1s infinite;
  animation: wing2 1s infinite;
}
@-webkit-keyframes wing1 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
}
@-webkit-keyframes wing2 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
}
@-moz-keyframes wing1 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
}
@-moz-keyframes wing2 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
}
@-o-keyframes wing1 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
}
@-o-keyframes wing2 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
}
@keyframes wing1 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
}
@keyframes wing2 {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    -moz-transform: rotate3d(0, 1, 0, -20deg);
    -o-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 20deg);
    -moz-transform: rotate3d(0, 1, 0, 20deg);
    -o-transform: rotate3d(0, 1, 0, 20deg);
    transform: rotate3d(0, 1, 0, 20deg);
  }
}
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Demo - After animation is added

这里可能有什么问题？请任何人建议。

1 个答案:

答案 0 :(得分：2)

您看到的问题不是因为视角丢失或未应用，而是因为您的原始变换被动画关键帧中指定的值覆盖了。

最初使用rotate3d()将元素（没有动画）在X轴上旋转60度，但添加动画时，keyframes中指定的唯一变换是Y中的旋转轴。与任何CSS属性的情况一样，后续设置不是原始设置的附加设置，但它实际上会覆盖它，因此当应用动画时，X轴上的旋转无效。

为了克服这个问题，应该修改transform中的keyframes属性，使得X轴旋转在整个动画中保持不变，而Y轴单独旋转会随帧变化以产生一个翼 - 像动画一样。

以下代码段应该是您所需要的。

ul {
  width: 500px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
  transform-style: preserve-3d;
  perspective: 300px;
  backface-visibility: hidden;
  transform: none;
}
ul li {
  display: inline-block;
  width: 60px;
  height: 200px;
  background: #333;
  margin: 0;
  padding: 0;
  transform: rotate3d(1, 0, 0, 60deg);
  box-shadow: 0px 0px 25px #666;
  z-index: 2
}
li:nth-child(1),
li:nth-child(3) {
  background: #666;
  width: 200px;
}
li:nth-child(1) {
  transform-origin: right center;
  animation: wing1 1s infinite;
}
li:nth-child(3) {
  transform-origin: left center;
  animation: wing2 1s infinite;
}
@keyframes wing1 {
  0% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, -60deg);
  }
  50% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, 60deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, -60deg);
  }
}
@keyframes wing2 {
  0% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, -60deg);
  }
  100% {
    transform: rotate3d(1, 0, 0, 60deg) rotate3d(0, 1, 0, 60deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

相关问题
最新问题