原创夜空教程 html220 阅读 2018-12-12 10:36:33
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- CSS3 实现 3D 叠层效果
- </title>
- <style>
- body{ margin: 0; padding: 0; width: 100%; height: 100vh; display: flex;
- align-items: center; justify-content: center; } .container{ position: relative;
- width: 360px; height: 640px; background: rgba(0,0,0,.1); transform: rotate(-30deg)
- skew(25deg) scale(.7); transition:.3s; } .container img{ position: absolute;
- width: 100%; transition: .5s; } .container:hover img:nth-child(4){ transform:
- translate(160px,-160px); opacity: 1; } .container:hover img:nth-child(3){
- transform: translate(120px,-120px); opacity: .8; } .container:hover img:nth-child(2){
- transform: translate(80px,-80px); opacity: .5; } .container:hover img:nth-child(1){
- opacity: .4; transform: translate(40px,-40px); }
- </style>
- </head>
- <body>
- <div class="container">
- <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg">
- <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg">
- <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg">
- <img src="https://123p1.sogoucdn.com/imgu/2018/12/20181211151344_369.jpg">
- </div>
- </body>
- </HTML>
CSS HTML
来源: http://www.qdfuns.com/article/48181/3f570c2a371c90eaa142c616f2cdacba.html