我可以使用 translate3D (css) 创建蝴蝶动画效果，或者在单个图像或元素上创建另一个 css 动画吗？

Question

我有一张蝴蝶的图片，类似于 this。

我正在尝试弄清楚是否有任何方法可以使它看起来像用 3D CSS transform/translate 或动画打开和关闭翅膀，但不必分割图像分成几部分（它可以是 div 的背景图片，但如果有帮助的话）。

Answer 1

是的，使用应用于两个元素的背景，其中每个元素只显示一半，然后您只需在 Y 轴上旋转两个元素即可。

.box {
  width:300px;
  margin:20px;
  display:flex;
  perspective:500px;
}
.box::before,
.box::after{
  content:"";
  padding-top:56%; /* ratio based on your image */
  flex:1; /* half the main element size */
  background-image:url(https://i.imgur.com/DgMoHC5.jpg);
  background-size:200% 100%; /* twice bigger than the pseudo element to get half the image*/
  animation:left 1s linear infinite alternate;  
  transform-origin:right;
}
.box::after {
  background-position:right; /* get the right part of the image */
  animation-name:right;
  transform-origin:left;
}

@keyframes left{
  to {transform:rotateY(60deg)}
}
@keyframes right{
  to {transform:rotateY(-60deg)}
}

<div class="box"></div>

带有一些翻译的更真实的动画：

.box {
  width: 300px;
  margin: 20px;
  display: flex;
  perspective: 500px;
}

.box::before,
.box::after {
  content: "";
  padding-top: 56%;
  flex: 1;
  background-image: url(https://i.imgur.com/DgMoHC5.jpg);
  background-size: 200% 100%;
  animation: left 0.5s linear infinite alternate;
  transform-origin: right;
}

.box::after {
  background-position: right;
  animation-name: right;
  transform-origin: left;
}

@keyframes left {
  from {
    transform: translateZ(80px) rotateY(-30deg)
  }
  to {
    transform:translateZ(0px) rotateY(50deg) 
  }
}

@keyframes right {
  from { 
    transform: translateZ(80px) rotateY(30deg)
  }
  to {
    transform:translateZ(0px) rotateY(-50deg) 
  }
}

<div class="box"></div>

我可以使用 translate3D (css) 创建蝴蝶动画效果，或者在单个图像或元素上创建另一个 css 动画吗？

Can I create a butterfly animation effect with translate3D (css), or another css animation on a single image or element?

css

css-animations

css-transitions

css-transforms