3D分层图像悬停效果 html+css

一时失言乱红尘 2023-01-14 01:56 112阅读 0赞

## 一.（⊙-⊙）先看效果（完整源码在底部）： ##

![在这里插入图片描述][20210419222844844.gif_pic_center]

## 二. (￣◇￣)实现过程步骤： ##

##### 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.定义基本标签： #####

.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；绝对定位。

## 三.完整代码 (。\_。) ： ##

<!DOCTYPE html>
    <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>Night</title>
        <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>

## 四.总结(￣< ￣)> ： ##

刚看了哪吒重生，剧情一般，但特效不错~  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

**其它文章：**  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等

[20210419222844844.gif_pic_center]: /images/20221022/88e4c1659252433795bd88ec113203ff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/bd4be3654dc341d68f2b88c44e7a7002.png
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630