特效之（图片立体化效果）"/>
2020前端不得不掌握的css3动画特效之（图片立体化效果）
效果图
实现步骤
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更美观。
更多推荐
2020前端不得不掌握的css3动画特效之（图片立体化效果）
发布评论