3D分层图像悬停效果 html+css
一.（⊙-⊙）先看效果（完整源码在底部）：
二. (￣◇￣)实现过程步骤：
0.基本css样式（复制即可）* ：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(9, 22, 37);
}
1.定义基本标签：
<div class="container">
<div class="box">
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<span>span>
div>
div>
.container是底层盒子。
.box是放图片的盒子。
img是图片。
span是最下面那个蓝色的盒子。
2.底层盒子css样式：
.container{
position: relative;
perspective: 2000px;
}
position：relative；相对定位。
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
3. box的基本样式：
.box{
position: relative;
width: 220px;
height: 360px;
transition: all 0.5s;
transform-style: preserve-3d;
}
.box:hover{
transform: rotateX(50deg) rotateZ(-50deg);
}
transition：过渡。
transform-style: preserve-3d; 子元素保留3d位置。
rotateX 绕X轴旋转50度。
retateY 绕Y轴旋转-50度。
4. 图片的基本样式：
.box img{
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 3px rgb(61, 138, 226);
transition: all 1.5s;
transform: translateZ(0px);
}
box-shadow：阴影。
transform: translateZ(0px); Z轴方向偏移0px。
5.实现分层，每张图片偏移一段距离：
.box:hover img:nth-child(2){
transform: translateX(-10px) translateY(10px) translateZ(-10px);
opacity: 0.8;
}
.box:hover img:nth-child(3){
transform: translateX(-20px) translateY(20px) translateZ(-20px);
opacity: 0.6;
}
.box:hover img:nth-child(4){
transform: translateX(-30px) translateY(30px) translateZ(-30px);
opacity: 0.4;
}
.box:hover img:nth-child(5){
transform: translateX(-40px) translateY(40px) translateZ(-40px);
opacity: 0.2;
}
translateX X轴上偏移。
translateY Y轴上偏移。
opacity：透明度。
6.在最下层再加一个蓝色的盒子：
.box span{
position: absolute;
width: 100%;
height: 100%;
transition: all 1.5s;
opacity: 0.1;
}
.box:hover span{
transform: translateX(-50px) translateY(50px) translateZ(-50px);
box-shadow: 0 0 40px rgb(41, 151, 253);
background-color: rgb(41, 151, 253);
}
position：absolute；绝对定位。
三.完整代码 (。_。) ：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nighttitle>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(9, 22, 37);
}
.container{
position: relative;
perspective: 2000px;
}
.box{
position: relative;
width: 220px;
height: 360px;
transition: all 0.5s;
transform-style: preserve-3d;
}
.box:hover{
transform: rotateX(50deg) rotateZ(-50deg);
}
.box img{
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 3px rgb(61, 138, 226);
transition: all 1.5s;
transform: translateZ(0px);
}
.box:hover img:nth-child(2){
transform: translateX(-10px) translateY(10px) translateZ(-10px);
opacity: 0.8;
}
.box:hover img:nth-child(3){
transform: translateX(-20px) translateY(20px) translateZ(-20px);
opacity: 0.6;
}
.box:hover img:nth-child(4){
transform: translateX(-30px) translateY(30px) translateZ(-30px);
opacity: 0.4;
}
.box:hover img:nth-child(5){
transform: translateX(-40px) translateY(40px) translateZ(-40px);
opacity: 0.2;
}
.box span{
position: absolute;
width: 100%;
height: 100%;
transition: all 1.5s;
opacity: 0.1;
}
.box:hover span{
transform: translateX(-50px) translateY(50px) translateZ(-50px);
box-shadow: 0 0 40px rgb(41, 151, 253);
background-color: rgb(41, 151, 253);
}
style>
head>
<body>
<div class="container">
<div class="box">
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<img src="img/photo.jpg" alt="x" >
<span>span>
div>
div>
body>
html>
四.总结(￣< ￣)> ：
刚看了哪吒重生，剧情一般，但特效不错~
其它文章：
环绕倒影加载特效 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等