效果图
实现步骤
1. html基本格式代码写上,然后在body中添加一个内容div,div里面放三张img图片图片路径自定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3d</title>
<link rel="stylesheet" href="css/g.css" type="text/css">
</head>
<body>
<div class="content">
<img src="img/man.png" />
<img src="img/man.png" />
<img src="img/man.png" />
</div>
</body>
</html>
2. 设置父元素content为相对定位,子元素img为绝对定位,并且居中。设置img宽度自适应content的大小,也就是250px,content没有设置高,所以他被内容撑开,也就是被图片的高撑开。最后设置transition属性为0.5s,产生渐变效果。
注:子元素绝对定位,父元素相对定位,简称子绝父相,目的是让子元素 以其父元素为标准来定位。(如果不这么做,子元素就会相对body或浏览器定位产生不好的效果。)
body{
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
background: rgba(12,12,12,0.1);
}
.content{
margin: 400px;
position: relative;
width: 250px;
background: rgba(12,0,0,1);
}
.content img{
position: absolute;
width: 100%;
transition: 0.5s;
}
3. 接着利用伪类选择器,当鼠标放置上去时,让三张图片以不同的效果进行变换。其中的transform属性控制了2d图片的变换,rotate设置旋转,skew设置图片倾斜,translate设置图片平移。设置透明度,并且为最底层的img设置一个阴影效果box-shadow,并且越底层的图片越透明,使用opacity属性设置透明度。
.content:hover img:nth-child(1){
opacity: 0.2;
box-shadow: -8px 8px 5px rgba(12,12,12,1);
transform: rotate(-20deg) skew(25deg) translate(30px,-30px);
}
.content:hover img:nth-child(2){
opacity: 0.6;
transform: rotate(-20deg) skew(25deg) translate(60px,-60px);
}
.content:hover img:nth-child(3){
opacity:1;
transform: rotate(-20deg) skew(25deg) translate(90px,-90px);
}
代码结束,图片的宽最好用ps修改为250px更美观。