CSS3 -3D Flip Animation-

연습 2015. 9. 30. 22:14



front
back



소스 예제


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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<style type="text/css">
        /* simple */
        .flip-container {
            -webkit-perspective: 1000;
            -moz-perspective: 1000;
            -ms-perspective: 1000;
            perspective: 1000;
            -ms-transform: perspective(1000px);
            -moz-transform: perspective(1000px);
                -moz-transform-style: preserve-3d; 
                -ms-transform-style: preserve-3d; 
            border: 1px solid #ccc;
        }
        /*
        .flip-container:hover .flipper, .flip-container.hover .flipper, #flip-toggle.flip .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            transform: rotateY(180deg);
            filter: FlipH;
            -ms-filter: "FlipH";
        }
        */
        /* START: Accommodating for IE */
        .flip-container:hover .back, .flip-container.hover .back {
            -webkit-transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -o-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            transform: rotateY(0deg);
        }
        .flip-container:hover .front, .flip-container.hover .front {
             -webkit-transform: rotateY(180deg);
             -moz-transform: rotateY(180deg);
             -o-transform: rotateY(180deg);
             transform: rotateY(180deg);
        }
        
        /* END: Accommodating for IE */
        .flip-container, .front, .back {
            width: 320px;
            height: 427px;
        }
        .flipper {
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -ms-transition: 0.6s;
            -moz-transition: 0.6s;
            -moz-transform: perspective(1000px);
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transition: 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }
        .front, .back {
             -webkit-backface-visibility: hidden;
             -moz-backface-visibility: hidden;
             -ms-backface-visibility: hidden;
             backface-visibility: hidden;
            -webkit-transition: 0.6s;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            -moz-transition: 0.6s;
            -moz-transform-style: preserve-3d;
            -moz-transform: rotateY(0deg);
            -o-transition: 0.6s;
            -o-transform-style: preserve-3d;
            -o-transform: rotateY(0deg);
            -ms-transition: 0.6s;
            -ms-transform-style: preserve-3d;
            -ms-transform: rotateY(0deg);
            transition: 0.6s;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            position: absolute;
            top: 0;
            left: 0;
        }
        .front {
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);
            background: lightgreen;
            z-index: 2;
        }
        .back {
            background: lightblue;
            -webkit-transform: rotateY(-180deg);
            -moz-transform: rotateY(-180deg);
            -o-transform: rotateY(-180deg);
            -ms-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
        }
        .front .name {
            font-size: 2em;
            display: inline-block;
            background: rgba(33, 33, 33, 0.9);
            color: #f8f8f8;
            font-family: Courier;
            padding: 5px 10px;
            border-radius: 5px;
            bottom: 60px;
            left: 25%;
            position: absolute;
            text-shadow: 0.1em 0.1em 0.05em #333;
            display: none;
            -webkit-transform: rotate(-20deg);
            -moz-transform: rotate(-20deg);
            -ms-transform: rotate(-20deg);
            transform: rotate(-20deg);
        }
        .back-logo {
            position: absolute;
            top: 40px;
            left: 90px;
            width: 160px;
            height: 117px;
            background: url(logo.png) 0 0 no-repeat;
        }
        .back-title {
            font-weight: bold;
            color: #00304a;
            position: absolute;
            top: 180px;
            left: 0;
            right: 0;
            text-align: center;
            text-shadow: 0.1em 0.1em 0.05em #acd7e5;
            font-family: Courier;
            font-size: 22px;
        }
        .back p {
            position: absolute;
            bottom: 40px;
            left: 0;
            right: 0;
            text-align: center;
            padding: 0 20px;
            font-size: 18px;
        }
        /* vertical */
        .vertical.flip-container {
            position: relative;
        }
        .vertical .back {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
        .vertical.flip-container .flipper {
            -webkit-transform-origin: 100% 213.5px;
            -moz-transform-origin: 100% 213.5px;
            -ms-transform-origin: 100% 213.5px;
            transform-origin: 100% 213.5px;
        }
        /*
        .vertical.flip-container:hover .flipper {
            -webkit-transform: rotateX(-180deg);
            -moz-transform: rotateX(-180deg);
            -ms-transform: rotateX(-180deg);
            transform: rotateX(-180deg);
        }
        */
        /* START: Accommodating for IE */
        .vertical.flip-container:hover .back, .vertical.flip-container.hover .back {
            -webkit-transform: rotateX(0deg);
            -moz-transform: rotateX(0deg);
            -o-transform: rotateX(0deg);
            -ms-transform: rotateX(0deg);
            transform: rotateX(0deg);
        }
        .vertical.flip-container:hover .front, .vertical.flip-container.hover .front {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
        }
    /* END: Accommodating for IE */
</style>
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front"><br /></div><div class="front"><br /></div><div class="front"><br /></div><div class="front">
            front
        </div>
        <div class="back">
            back
        </div>
    </div>
</div>
 
 
 
cs


저작자표시

'연습' 카테고리의 다른 글

base64 - 0 : 이론 -  (0) 2015.10.03
OpenCL 프로그래밍 공부 -시작-  (0) 2015.10.02
ffprobe 사용법 -영상 정보 보기-  (0) 2015.09.30
ffmpeg 사용 -mp4 to webm convert(mp4을 webm으로 변환)-  (0) 2015.09.29
ffmpeg -이미지 추출-  (0) 2015.09.28
Posted by JunkMam
,

티스토리툴바