css三张图片翻转的keyframes

CSS中的Keyframes是让我们可以制作一些动画效果的利器。本文将介绍如何用CSS制作三张图片翻转的动画效果。

/* 先定义一个规则集 */
.flip {
  perspective: 1000px; /* 定义3D景深 */
  position: relative; /* 定义相对定位 */
  width: 200px; /* 定义宽度 */
  height: 260px; /* 定义高度 */
}

/* 翻转的正面 */
.flip .front {
  position: absolute; /* 定义绝对定位 */
  transform-style: preserve-3d; /* 子元素成为3d环境 */
  width: 100%; /* 宽度占满 */
  height: 100%; /* 高度占满 */
  backface-visibility: hidden; /* 隐藏背面 */
  z-index: 2; /* 把正面放在上面 */
}

/* 翻转的背面 */
.flip .back {
  position: absolute; /* 定义绝对定位 */
  transform-style: preserve-3d; /* 子元素成为3d环境 */
  transform: rotateY(180deg); /* 让背面翻转 */
  width: 100%; /* 宽度占满 */
  height: 100%; /* 高度占满 */
  backface-visibility: hidden; /* 隐藏正面 */
}

/* 定义图片 */
.flip .front img, .flip .back img {
  width: 100%; /* 宽度占满 */
  height: 100%; /* 高度占满 */
}

/* 开始定义动画 */
@keyframes flip {
  0% {
    transform: rotateY(0deg); /* 初始状态 */
  }
  50% {
    transform: rotateY(90deg); /* 变成翻转的状态 */
  }
  100% {
    transform: rotateY(180deg); /* 完整翻转的状态 */
  }
}

/* 规定翻转时间 */
.flip:hover .front {
  animation: flip 1s ease-in-out forwards; /* 鼠标hover时前面翻转 */
}

.flip:hover .back {
  animation: flip 1s ease-in-out forwards; /* 鼠标hover时后面翻转 */
} 

以上代码定义了一个Flip的规则集，包括正面、背面和图片样式的定义，以及翻转动画的实现。在鼠标hover时，分别触发正面和背面的翻转动画，让整个元素呈现3D效果。