CSS打造图片翻转立体3D效果

一.案例效果展示

二.搭建一个基本的html结构，将需要用到的图片居中

html的结构非常简单，只要一个盒子里面放二张照片即可

html代码：

  <div class="img_box">
    <img src="./img/1.png" id="img1">
    <img src="./img/2.png" id="img2">
  </div>复制

css代码：

     * {
      margin: 0;
      padding: 0;
    }
 
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #01C4DA;
    }复制

三.首先我们要对二张图片进行翻转处理就应该给她们开启定位，这样他们就会覆盖在一起了

     .img_box {
      width: 400px;
      height: 500px;
      padding-top: 140px;
      position: relative;
    }
 
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 20px;
      box-shadow: 0 0 15px rgba(0, 0, 0);
    }复制

这里记得开绝对定位时一定要给父盒子开启相对定位，否则图片就会以body为父盒子进行定位了

四.图片翻转的主要实现思路

我们可以通过transform这个css属性对样式进行一些翻转处理

1.我们需要翻转第一张图片展示第二张图片，所以我们就要对图片进行180°的翻转

我们可以对某一张图片进行一个翻转处理

    #img2 {
      transform: rotateY(180deg);
    }复制

这里注意在添加属性后，图片进行了翻转，但是并没有显示第一张图片，此时我们可以加一条属性来控制，他的主要作用就是当图片处理背面时将它隐藏

       backface-visibility: hidden;复制

2.然后可以对body添加一个hover事件，实现图片的切换

注意这里我们在鼠标进入时，应该将背面的图片翻转回来，而另外一张图片应该进行逆向翻转，这也才能看起来更加的连贯

  body:hover #img2 {
      transform: rotateY(0deg);
    }
 
body:hover #img1 {
      transform: rotateY(-180deg);
    }复制

3.然后给图片添加一个过度的时间

 transition: 2s all;复制

我们的基本翻转功能已经实现了，但是图片翻转看起来非常的生硬，不够美观，所以此时我们可以对图片进行3D化处理，让其看起来更有立体感

五.3D效果实现

我们这里主要用到二个属性，一个是开启三维空间，一个是配合此属性来实现逼真的立体效果

   transform-style: preserve-3d;
      /* 开启三维空间 */
  perspective: 1000px;
      /* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */复制

perspective的主要作用实现模拟你的眼睛与图片的距离的效果，值越小，透视效果越强烈，物体大小看起来更大；值越大，透视效果越弱，物体大小看起来更小。

1000px是我测试出来看起来比较美观的值，也可以尝试设置一些比较小的值，能打开新世界的大门。

六.完整代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
 
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #01C4DA;
      perspective: 1000px;
      /* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */
    }
 
    .img_box {
      width: 400px;
      height: 500px;
      padding-top: 140px;
      position: relative;
      transform-style: preserve-3d;
      /* 开启三维空间 */
    }
 
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      border-radius: 20px;
      box-shadow: 0 0 15px rgba(0, 0, 0);
      backface-visibility: hidden;
      /* 该句代码的意思就是当你是背面面向的时候，就会隐藏图片，我们设置的180°旋转就是让他隐藏了 */
      transition: 2s all;
    }
 
    #img2 {
      transform: rotateY(180deg);
    }
 
    body:hover #img2 {
      transform: rotateY(0deg);
    }
 
    body:hover #img1 {
      transform: rotateY(-180deg);
    }
  </style>
</head>
 
<body>
  <div class="img_box">
    <img src="./img/1.png" id="img1">
    <img src="./img/2.png" id="img2">
  </div>
</body>
 
</html>复制

over

	<div class="img_box">
	<img src="./img/1.png" id="img1">
	<img src="./img/2.png" id="img2">
	</div>

	* {
	margin: 0;
	padding: 0;
	}

	body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #01C4DA;
	}

	.img_box {
	width: 400px;
	height: 500px;
	padding-top: 140px;
	position: relative;
	}

	img {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0);
	}

	body:hover #img2 {
	transform: rotateY(0deg);
	}

	body:hover #img1 {
	transform: rotateY(-180deg);
	}

	transform-style: preserve-3d;
	/* 开启三维空间 */
	perspective: 1000px;
	/* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	body {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #01C4DA;
	perspective: 1000px;
	/* 可以改变元素在视觉上的尺寸和位置，从而创建出更加逼真的3D效果 */
	}

	.img_box {
	width: 400px;
	height: 500px;
	padding-top: 140px;
	position: relative;
	transform-style: preserve-3d;
	/* 开启三维空间 */
	}

	img {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0);
	backface-visibility: hidden;
	/* 该句代码的意思就是当你是背面面向的时候，就会隐藏图片，我们设置的180°旋转就是让他隐藏了 */
	transition: 2s all;
	}

	#img2 {
	transform: rotateY(180deg);
	}

	body:hover #img2 {
	transform: rotateY(0deg);
	}

	body:hover #img1 {
	transform: rotateY(-180deg);
	}
	</style>
	</head>

	<body>
	<div class="img_box">
	<img src="./img/1.png" id="img1">
	<img src="./img/2.png" id="img2">
	</div>
	</body>

	</html>