CSS3制作图片左右翻转特效

这可以通过使用CSS3动画和偏移量来实现照片的左右飞入和滑出效果。以下是实现该效果的代码示例：

HTML代码：

<div class="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

CSS3代码：

.slider {
  width: 500px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.slider img.active {
  opacity: 1;
}

.slider img.left {
  transform: translateX(-100%);
}

.slider img.right {
  transform: translateX(100%);
}

.slider .prev {
  left: 0;
}

.slider .next {
  right: 0;
}

.slider .prev.active {
  z-index: 1;
}

.slider .next.active {
  z-index: 2;
}

.slider .prev.left,
.slider .next.right {
  z-index: 3;
}

JavaScript代码：

var slider = document.querySelector('.slider');
var prev = document.createElement('div');
prev.textContent = '<';
prev.classList.add('prev');
slider.appendChild(prev);
var next = document.createElement('div');
next.textContent = '>';
next.classList.add('next');
slider.appendChild(next);

var images = Array.from(document.querySelectorAll('.slider img'));
images[0].classList.add('active');
images[0].classList.add('right');

prev.addEventListener('click', function() {
  var active = document.querySelector('.slider img.active');
  var prev = active.previousElementSibling || images[images.length - 1];
  active.classList.remove('active');
  active.classList.add('left');
  prev.classList.add('active');
  prev.classList.remove('left');
  prev.classList.remove('right');
});

next.addEventListener('click', function() {
  var active = document.querySelector('.slider img.active');
  var next = active.nextElementSibling || images[0];
  active.classList.remove('active');
  active.classList.add('right');
  next.classList.add('active');
  next.classList.remove('left');
  next.classList.remove('right');
});

使用上述代码，您可以轻松实现照片的左右飞入滑出切换效果。只需将图片替换为您自己的图像即可。