以下是CSS图片翻转动画技术的详细攻略：

CSS图片翻转动画技术详解（IE也实现了）

1. 概述

CSS图片翻转动画技术是一种常用的Web前端开发技术，通过CSS3中的transform属性和transition属性实现图片的翻转、旋转等动画效果。同时，这种技术在IE浏览器中也有多种实现方式，可以兼容更多用户。

2. 实现过程

2.1 基本过程

实现图片翻转动画的基本过程如下：

• 准备图片和HTML代码，将图片作为一个div元素的背景图片。
• 通过CSS将div元素的背景图样式设置为 contain，并将transform属性设置为 rotateY(180deg)。
• 当div元素被hover时，通过transition属性将transform属性从 rotateY(180deg) 变为 rotateY(0deg)，从而实现图片翻转动画。

示例代码如下：

.flip-container {
  perspective: 1000px;
}

.flipper {
  background-size: contain;
  width: 200px;
  height: 200px;
  position: relative;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.flipper:hover {
  transform: rotateY(180deg);
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
}

<div class="flip-container">
  <div class="flipper">
    <div class="front" style="background-image: url('图片路径')"></div>
    <div class="back" style="background-image: url('反面图片路径')"></div>
  </div>
</div>

2.2 兼容IE的实现方式

以上代码是通过CSS3的transform和transition属性实现的，在IE浏览器中无法实现。为了兼容IE浏览器，我们可以通过JavaScript实现：

• 通过jQuery为flipper元素添加hover事件监听。
• 当鼠标移入时，通过animate()函数实现transform属性从 rotateY(180deg) 变为 rotateY(0deg)，从而实现图片翻转动画。
• 当鼠标移出时，通过animate()函数实现transform属性从 rotateY(0deg) 变为 rotateY(180deg)，返回原始状态。

示例代码如下：

<div class="flip-container">
  <div class="flipper ie-flipper">
    <div class="front" style="background-image: url('图片路径')"></div>
    <div class="back" style="background-image: url('反面图片路径')"></div>
  </div>
</div>

$('.ie-flipper').hover(
  function () {
    $(this).find('.back').stop().animate({transform: 'rotateY(0deg)'}, 600);
  },
  function () {
    $(this).find('.back').stop().animate({transform: 'rotateY(180deg)'}, 600);
  }
);

3. 总结

以上就是CSS图片翻转动画技术的详细攻略了。通过transform和transition属性实现的方法可以直接在现代浏览器中使用，而使用JavaScript兼容IE浏览器的方法则可以让更多用户享受这种动画效果。