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

问题描述

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

我想弄清楚是否有任何方法可以使用 3D CSS 变换/平移或动画使其看起来像打开和关闭翅膀，但不必将图像分成几部分（它可以是一个div 的背景图片，如果有帮助的话）。

解决方法

是的，使用应用于两个元素的背景，其中每个元素只显示一半，然后您只需在 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>