PROMULGATOR

    世界末日了

    北京市263网络通信股份有限公司
    Html
    Css
    Js
1
2
3
4
5
6
7
8
9
10
11
12
<div id="a">
    <div id="c">
    </div>
    <div id="b">
        <div><img src="http://www.jq22.com/img/cs/500x500-1.png"></div>
        <div><img src="http://www.jq22.com/img/cs/500x500-2.png"></div>
        <div><img src="http://www.jq22.com/img/cs/500x500-3.png"></div>
        <div><img src="http://www.jq22.com/img/cs/500x500-4.png"></div>
        <div><img src="http://www.jq22.com/img/cs/500x500-5.png"></div>
        <div><img src="http://www.jq22.com/img/cs/500x500-6.png"></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
#a {
    width:800px;
    height:400px;
    margin:0 auto;
    /*perpective*/
    -webkit-perspective:1200px;
}
#b {
    width:800px;
    height:400px;
    transform:rotatex(-20deg)  rotatey(0deg);
    /*border:1px solid red;
    */
    position:relative;
    /*规定 子元素 按照3d位置摆放*/
    -webkit-transform-style:preserve-3d;
    animation:xz 10s linear infinite;
    /*              float:left;
    */
}
#b div {
    width:100px;
    height:100px;
    background:#e4393c;
    /*绝对定位*/
                position:absolute;
    top:150px;
    left:350px;
}
#b div:nth-child(1) {
    transform:rotatey(0deg) translatez(200px);
}
#b div:nth-child(2) {
    transform:rotatey(60deg) translatez(200px);
}
#b div:nth-child(3) {
    transform:rotatey(120deg) translatez(200px);
}
#b div:nth-child(4) {
    transform:rotatey(180deg) translatez(200px);
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

纯css 3D旋转

0