PROMULGATOR

    今夜无眠

    北京市
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="waibu">
    <div class="neibu">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</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
@keyframes xuanz {
    0% {
    transform:rotateY(0deg) rotatex(15deg);
}
100% {
    transform:rotateY(360deg) rotatex(15deg);
}
}.waibu {
    perspective:800px;
}
.neibu {
    transform-style:preserve-3d;
    position:relative;
    width:200px;
    height:200px;
    margin:400px auto;
    animation:xuanz 10s infinite linear;
}
.neibu div {
    width:200px;
    height:200px;
    position:absolute;
    left:0;
    top:0;
}
.neibu div:nth-child(1) {
    transform:translatez(-100px);
    background:url(https://www.jq22.com/img/cs/500x500-1.png) 0 -50PX /cover;
}
.neibu div:nth-child(2) {
    transform:rotateY(90deg) translatez(-100px);
    background:url(https://www.jq22.com/img/cs/500x500-2.png) 0 -50PX /cover;
}
.neibu div:nth-child(3) {
    transform:rotateY(90deg) translatez(100px);
    background:url(https://www.jq22.com/img/cs/500x500-3.png) 0 -50PX /cover;
}
.neibu div:nth-child(4) {
    transform:rotatex(-90deg) translatez(100px);
    background:url(https://www.jq22.com/img/cs/500x500-4.png) 0 -50PX /cover;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

3d立方体相册（纯css）

更新时间：2023-04-20 21:45:04

0