PROMULGATOR

    . 侦??

    上海市
    Html
    Css
    Js
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
<main>
    <div id="feiji">
        <div id="tou">
            <div class="tou-t"></div>
            <div class="tou-b"></div>
            <div class="tou-l"></div>
            <div class="tou-r"></div>
        </div>
        <div id="jishen">
            <div class="jishen-t"></div>
            <div class="jishen-b"></div>
            <div class="jishen-l"></div>
            <div class="jishen-r"></div>
            <div id="yi" class="yi-l"></div>
            <div id="yi" class="yi-r"></div>
        </div>
        <div id="wei">
            <div class="wei-l"></div>
            <div class="wei-r"></div>
            <div class="wei-t"></div>
            <div class="wei-b"></div>
            <div class="wei-yl"></div>
            <div class="wei-yr"></div>
            <div class="wei-yt"></div>
        </div>
    </div>
    <div id="feng"></div>
    <div id="feng"></div>
    <div id="feng"></div>
    <div id="feng"></div>
</main>
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
* {
    margin:0 auto;
}
html {
    height:100%;
}
body {
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgb(7,83,83);
    perspective:3000px;
    /*滤镜形成阴影效果*/
        filter:-shadow(0px 120px 10px rgba(0,0,0,0.5));
    overflow:hidden;
}
main {
    width:500px;
    height:400px;
    border:1px solid transparent;
    /* perspective:3000px;
    */
        transform-style:preserve-3d;
    /* transform:rotateX(-100deg);
    */
        animation:dong 20s linear infinite alternate;
    cursor:pointer;
}
@keyframes dong {
    0% {
    }50% {
    transform:rotateX(-80deg) rotateY(-80deg) rotateZ(0deg);
}
100% {
    transform:rotateX(80deg) rotateY(80deg) rotateZ(45deg);
}
}div {
    transform-style:preserve-3d;
    /* transform:rotateX(90deg);
    */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

CSS 3D战斗机

body 内有阴影效果，部分浏览器目前不太支持，若图像不完整可以选择注释掉

0