PROMULGATOR

    之所珍倨

    广东省广州市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
<div class="box">
    <h2>Jelly Fish</h2>
    <img src="https://www.jq22.com/img/cs/500x300-1.png">
</div>
<div class="box">
    <h2>Kayak Day</h2>
    <img src="https://www.jq22.com/img/cs/500x300-2.png">
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
img {
    /* adjust the below to control the 3D effect */
  --x:10px;
    --y:20px;
    transform:perspective(1000px) rotateX(var(--_a,40deg));
    /* */
  clip-path:polygon(       
     var(--y)              var(--y),calc(100% - var(--y)) var(--y),calc(100% - var(--y)) calc(100% - var(--y)),calc(100% - var(--y) - var(--x)) var(--_c,100%),calc(var(--x) + var(--y))        var(--_c,100%),var(--y)        calc(100% - var(--y))       
     );
    outline:var(--y) solid rgba(0,0,0,0.4);
    outline-offset:calc(-1*var(--y));
    padding:var(--y) var(--y) 0 var(--y);
    transition:1s;
}
.box:hover img {
    --_a:0deg;
    --_c:calc(100% - var(--y));
}
/* the below is irrelevant to the 3D effect */
.box {
    cursor:pointer;
}
h2 {
    text-align:center;
    margin:0;
    font-size:30px;
    font-weight:bold;
    font-family:sans-serif;
    transform:translateY(250%);
    transition:.8s;
}
.box:hover h2 {
    transform:translateY(0%);
    transition:.8s .2s;
}
body {
    background:#ccc;
    display:grid;
    height:100vh;
    grid-auto-flow:column;
    place-content:center;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

纯CSS 3D图片展示

更新时间：2022-04-05 23:34:00

用纯css实现3d图片效果

0