一.案例效果展示
二.搭建一个基本的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