[Javascript] 3D Clock

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="style.css" />
        <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="commons.js"></script>
        <script>
            var i = 3;
            $(document).ready(function () {                
                setInterval(function () {
                    var date = new Date();
                    i++;
                    $(".cube").eq(i-1).html(date.getHours() + " : " + date.getMinutes() + " : " + date.getSeconds());
                    if(i == 4) i = 0;
                }, 1000);
            });
        </script>
        <style>
            * {
                margin : 0;
                padding:  0;
                text-decoration: none;
                list-style: none;
                font-family: sans-serif;
            }
            body {
                color: white;
                text-transform: uppercase;
                font-family: sans-serif;
                font-size: 100%;
                background: #F4F6F8;
                padding: 3em 0 0 0;
                line-height: 50px;
                text-align: center;
            }
            .statusBox {
                position: relative;
                margin : 0 auto;
                height: 50px;
                width : 200px;
                transition : 0.33s;
                transition : transform s linear;
                transform-style: preserve-3d;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-name : example;
                -webkit-animation-duration: 4s;
                
            }
            
            @-webkit-keyframes example {
                25%   {transform: rotateX(-90deg);}
                50%  {transform: rotateX(-180deg);}
                75%  {transform: rotateX(-270deg);}
                100% {transform: rotateX(-360deg);}
            }
            .cube {
                position: absolute;
                width   : 100%;
                height  : 50px;
                font-size:20px;
                background: #eeeeee;
                transition : 0.33s;
            }
            .cube:nth-child(1) {
                transform: rotateX(0deg) translateZ(25px);
                background: rgb(0, 156, 253);
            }
            .cube:nth-child(2) {
                transform: rotateX(90deg) translateZ(25px);
                background: rgb(253, 0, 19);
            }
            .cube:nth-child(3) {
                transform: rotateX(180deg) translateZ(25px);
                background: rgb(61, 214, 33);
                
            }
            .cube:nth-child(4) {
                transform: rotateX(270deg) translateZ(25px);
                background: rgb(227, 87, 0);
            }
            .statusBox:active {
                transform: rotateX(-180deg);
            }
        </style>
    </head>
    <body>
        <div class="statusBox">
            <div class="cube"><h2>Success!</h2></div>
            <div class="cube"><h2>Failed</h2></div>
            <div class="cube"><h2>Submit?</h2></div>
            <div class="cube"><h2>OK?</h2></div>
        </div>
    </body>
</html>
Colored by Color Scripter
cs
재밌는 3D 큐브 시계 만들기
Sticky

[Javascript] 3D Clock

티스토리툴바
