Mercurial > hg > Members > taiki > slides
comparison deck.js/themes/transition/vertical-slide.css @ 0:dd1c78c6398f
add having slides
author | taiki <taiki@cr.ie.u-ryukyu.ac.jp> |
---|---|
date | Mon, 25 Mar 2013 05:14:03 +0900 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:dd1c78c6398f |
---|---|
1 .csstransitions.csstransforms .deck-container { | |
2 overflow-y: hidden; | |
3 } | |
4 .csstransitions.csstransforms .deck-container > .slide { | |
5 -webkit-transition: -webkit-transform 500ms ease-in-out; | |
6 -moz-transition: -moz-transform 500ms ease-in-out; | |
7 -ms-transition: -ms-transform 500ms ease-in-out; | |
8 -o-transition: -o-transform 500ms ease-in-out; | |
9 transition: transform 500ms ease-in-out; | |
10 } | |
11 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide { | |
12 position: absolute; | |
13 top: 0; | |
14 left: 0; | |
15 -webkit-box-sizing: border-box; | |
16 -moz-box-sizing: border-box; | |
17 box-sizing: border-box; | |
18 width: 100%; | |
19 padding: 0 48px; | |
20 } | |
21 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide { | |
22 position: relative; | |
23 left: 0; | |
24 top: 0; | |
25 -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
26 -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
27 -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
28 -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
29 transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out; | |
30 } | |
31 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after { | |
32 visibility: visible; | |
33 -webkit-transform: translate3d(0, 1600px, 0); | |
34 -moz-transform: translate(0, 1600px); | |
35 -ms-transform: translate(0, 1600px); | |
36 -o-transform: translate(0, 1600px); | |
37 transform: translate3d(0, 1600px, 0); | |
38 } | |
39 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous { | |
40 -webkit-transform: translate3d(0, -200%, 0); | |
41 -moz-transform: translate(0, -200%); | |
42 -ms-transform: translate(0, -200%); | |
43 -o-transform: translate(0, -200%); | |
44 transform: translate3d(0, -200%, 0); | |
45 } | |
46 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before { | |
47 -webkit-transform: translate3d(0, -400%, 0); | |
48 -moz-transform: translate(0, -400%); | |
49 -ms-transform: translate(0, -400%); | |
50 -o-transform: translate(0, -400%); | |
51 transform: translate3d(0, -400%, 0); | |
52 } | |
53 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next { | |
54 -webkit-transform: translate3d(0, 200%, 0); | |
55 -moz-transform: translate(0, 200%); | |
56 -ms-transform: translate(0, 200%); | |
57 -o-transform: translate(0, 200%); | |
58 transform: translate3d(0, 200%, 0); | |
59 } | |
60 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after { | |
61 -webkit-transform: translate3d(0, 400%, 0); | |
62 -moz-transform: translate(0, 400%); | |
63 -ms-transform: translate(0, 400%); | |
64 -o-transform: translate(0, 400%); | |
65 transform: translate3d(0, 400%, 0); | |
66 } | |
67 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide { | |
68 visibility: visible; | |
69 } | |
70 .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current { | |
71 -webkit-transform: none; | |
72 -moz-transform: none; | |
73 -ms-transform: none; | |
74 -o-transform: none; | |
75 transform: none; | |
76 } | |
77 .csstransitions.csstransforms .deck-prev-link { | |
78 left: auto; | |
79 right: 8px; | |
80 top: 59px; | |
81 -webkit-transform: rotate(90deg); | |
82 -moz-transform: rotate(90deg); | |
83 -ms-transform: rotate(90deg); | |
84 -o-transform: rotate(90deg); | |
85 transform: rotate(90deg); | |
86 } | |
87 .csstransitions.csstransforms .deck-next-link { | |
88 top: 99px; | |
89 -webkit-transform: rotate(90deg); | |
90 -moz-transform: rotate(90deg); | |
91 -ms-transform: rotate(90deg); | |
92 -o-transform: rotate(90deg); | |
93 transform: rotate(90deg); | |
94 } |