├── .gitignore ├── favicon.ico ├── img ├── living │ ├── a.jpg │ ├── b.jpg │ ├── lamp.jpg │ ├── pillow.jpg │ └── silvervase.jpg ├── bathroom │ ├── a.jpg │ ├── b.jpg │ ├── c.jpg │ ├── sink.jpg │ ├── bidet.jpg │ └── pillows.jpg ├── bedroom │ ├── a.jpg │ ├── b.jpg │ ├── horse.jpg │ ├── vase.jpg │ ├── blanket.jpg │ └── picture.jpg └── kitchen │ ├── a.jpg │ ├── b.jpg │ ├── bowlset.jpg │ ├── shakers.jpg │ └── coffeemachine.jpg ├── fonts ├── icomoon │ ├── icomoon.eot │ ├── icomoon.ttf │ ├── icomoon.woff │ ├── icomoon.woff2 │ ├── icomoon.css │ └── icomoon.svg └── codropsicons │ ├── codropsicons.eot │ ├── codropsicons.ttf │ ├── codropsicons.woff │ ├── license.txt │ └── codropsicons.svg ├── README.md ├── css ├── normalize.css ├── demo.css ├── component.css └── animations.css ├── js ├── classie.js ├── modernizr-custom.js └── main.js └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/favicon.ico -------------------------------------------------------------------------------- /img/living/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/living/a.jpg -------------------------------------------------------------------------------- /img/living/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/living/b.jpg -------------------------------------------------------------------------------- /img/bathroom/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/a.jpg -------------------------------------------------------------------------------- /img/bathroom/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/b.jpg -------------------------------------------------------------------------------- /img/bathroom/c.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/c.jpg -------------------------------------------------------------------------------- /img/bedroom/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/a.jpg -------------------------------------------------------------------------------- /img/bedroom/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/b.jpg -------------------------------------------------------------------------------- /img/kitchen/a.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/kitchen/a.jpg -------------------------------------------------------------------------------- /img/kitchen/b.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/kitchen/b.jpg -------------------------------------------------------------------------------- /img/living/lamp.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/living/lamp.jpg -------------------------------------------------------------------------------- /img/bathroom/sink.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/sink.jpg -------------------------------------------------------------------------------- /img/bedroom/horse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/horse.jpg -------------------------------------------------------------------------------- /img/bedroom/vase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/vase.jpg -------------------------------------------------------------------------------- /img/living/pillow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/living/pillow.jpg -------------------------------------------------------------------------------- /img/bathroom/bidet.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/bidet.jpg -------------------------------------------------------------------------------- /img/bathroom/pillows.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bathroom/pillows.jpg -------------------------------------------------------------------------------- /img/bedroom/blanket.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/blanket.jpg -------------------------------------------------------------------------------- /img/bedroom/picture.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/bedroom/picture.jpg -------------------------------------------------------------------------------- /img/kitchen/bowlset.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/kitchen/bowlset.jpg -------------------------------------------------------------------------------- /img/kitchen/shakers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/kitchen/shakers.jpg -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/icomoon/icomoon.eot -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/icomoon/icomoon.ttf -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/icomoon/icomoon.woff -------------------------------------------------------------------------------- /img/living/silvervase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/living/silvervase.jpg -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/icomoon/icomoon.woff2 -------------------------------------------------------------------------------- /img/kitchen/coffeemachine.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/img/kitchen/coffeemachine.jpg -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/codropsicons/codropsicons.eot -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/codropsicons/codropsicons.ttf -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/RoomDisplay/HEAD/fonts/codropsicons/codropsicons.woff -------------------------------------------------------------------------------- /fonts/codropsicons/license.txt: -------------------------------------------------------------------------------- 1 | Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/ 2 | License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL 3 | 4 | 5 | Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico 6 | License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/ -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src:url('icomoon.eot?70dpot'); 4 | src:url('icomoon.eot?70dpot#iefix') format('embedded-opentype'), 5 | url('icomoon.woff2?70dpot') format('woff2'), 6 | url('icomoon.ttf?70dpot') format('truetype'), 7 | url('icomoon.woff?70dpot') format('woff'), 8 | url('icomoon.svg?70dpot#icomoon') format('svg'); 9 | font-weight: normal; 10 | font-style: normal; 11 | } 12 | 13 | .icon { 14 | font-family: 'icomoon'; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | .icon--close:before { 28 | content: "\e901"; 29 | } 30 | .icon--shopping-cart:before { 31 | content: "\e900"; 32 | } 33 | 34 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Interactive Room Display 2 | 3 | An interactive room slideshow based on Bilal Mechairia's Dribbble shot ["Spaces - interaction prototype"](https://dribbble.com/shots/2275597-Spaces-interaction-prototype) 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=25440) 6 | 7 | [Demo](http://tympanus.net/Development/RoomDisplay/) 8 | 9 | ## License 10 | 11 | Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is". 12 | 13 | Read more here: [License](http://tympanus.net/codrops/licensing/) 14 | 15 | ## Credits 16 | Icons from [Brankic 1979 (subset)](http://brankic1979.com/icons/) and [Typicons (subset)](http://typicons.com/). 17 | 18 | ## Misc 19 | 20 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/pages/Codrops/159107397912), [Google+](https://plus.google.com/101095823814290637419), [GitHub](https://github.com/codrops), [Pinterest](http://www.pinterest.com/codrops/) 21 | 22 | [© Codrops 2015](http://www.codrops.com) 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /css/normalize.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} -------------------------------------------------------------------------------- /fonts/icomoon/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /js/classie.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * classie v1.0.1 3 | * class helper functions 4 | * from bonzo https://github.com/ded/bonzo 5 | * MIT license 6 | * 7 | * classie.has( elem, 'my-class' ) -> true/false 8 | * classie.add( elem, 'my-new-class' ) 9 | * classie.remove( elem, 'my-unwanted-class' ) 10 | * classie.toggle( elem, 'my-class' ) 11 | */ 12 | 13 | /*jshint browser: true, strict: true, undef: true, unused: true */ 14 | /*global define: false, module: false */ 15 | 16 | ( function( window ) { 17 | 18 | 'use strict'; 19 | 20 | // class helper functions from bonzo https://github.com/ded/bonzo 21 | 22 | function classReg( className ) { 23 | return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 24 | } 25 | 26 | // classList support for class management 27 | // altho to be fair, the api sucks because it won't accept multiple classes at once 28 | var hasClass, addClass, removeClass; 29 | 30 | if ( 'classList' in document.documentElement ) { 31 | hasClass = function( elem, c ) { 32 | return elem.classList.contains( c ); 33 | }; 34 | addClass = function( elem, c ) { 35 | elem.classList.add( c ); 36 | }; 37 | removeClass = function( elem, c ) { 38 | elem.classList.remove( c ); 39 | }; 40 | } 41 | else { 42 | hasClass = function( elem, c ) { 43 | return classReg( c ).test( elem.className ); 44 | }; 45 | addClass = function( elem, c ) { 46 | if ( !hasClass( elem, c ) ) { 47 | elem.className = elem.className + ' ' + c; 48 | } 49 | }; 50 | removeClass = function( elem, c ) { 51 | elem.className = elem.className.replace( classReg( c ), ' ' ); 52 | }; 53 | } 54 | 55 | function toggleClass( elem, c ) { 56 | var fn = hasClass( elem, c ) ? removeClass : addClass; 57 | fn( elem, c ); 58 | } 59 | 60 | var classie = { 61 | // full names 62 | hasClass: hasClass, 63 | addClass: addClass, 64 | removeClass: removeClass, 65 | toggleClass: toggleClass, 66 | // short names 67 | has: hasClass, 68 | add: addClass, 69 | remove: removeClass, 70 | toggle: toggleClass 71 | }; 72 | 73 | // transport 74 | if ( typeof define === 'function' && define.amd ) { 75 | // AMD 76 | define( classie ); 77 | } else if ( typeof exports === 'object' ) { 78 | // CommonJS 79 | module.exports = classie; 80 | } else { 81 | // browser global 82 | window.classie = classie; 83 | } 84 | 85 | })( window ); -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-weight: normal; 3 | font-style: normal; 4 | font-family: 'codropsicons'; 5 | src: url('../fonts/codropsicons/codropsicons.eot'); 6 | src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); 7 | } 8 | 9 | *, 10 | *:after, 11 | *:before { 12 | -webkit-box-sizing: border-box; 13 | box-sizing: border-box; 14 | } 15 | 16 | .clearfix:before, 17 | .clearfix:after { 18 | display: table; 19 | content: ''; 20 | } 21 | 22 | .clearfix:after { 23 | clear: both; 24 | } 25 | 26 | body { 27 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', 'Lato', 'Segoe UI', Helvetica, Arial, sans-serif; 28 | color: #444; 29 | background: #ececec; 30 | -webkit-font-smoothing: antialiased; 31 | -moz-osx-font-smoothing: grayscale; 32 | overflow-x: hidden; 33 | } 34 | 35 | a { 36 | color: #aaa; 37 | text-decoration: none; 38 | } 39 | 40 | a:hover, 41 | a:focus { 42 | color: #333; 43 | outline: none; 44 | } 45 | 46 | .info { 47 | color: #e57373; 48 | font-weight: bold; 49 | margin: 0; 50 | padding: 1em; 51 | display: none; 52 | } 53 | 54 | .no-preserve3d .info--support { 55 | display: block; 56 | position: absolute; 57 | bottom: 1em; 58 | right: 1em; 59 | } 60 | 61 | /* Header */ 62 | 63 | .codrops-header { 64 | padding: 2.5em 0 0 2.5em; 65 | display: -webkit-flex; 66 | display: flex; 67 | -webkit-align-items: center; 68 | align-items: center; 69 | z-index: 1000; 70 | color: #7faa3d; 71 | position: absolute; 72 | top: 0; 73 | left: 0; 74 | max-width: 420px; 75 | z-index: 10000; 76 | } 77 | 78 | .codrops-header h1 { 79 | margin: 0 1em; 80 | font-size: 1.05em; 81 | line-height: 1; 82 | } 83 | 84 | .codrops-header h1 span { 85 | color: #CAC9C9; 86 | display: block; 87 | font-size: 76.5%; 88 | margin: 0.25em 0 0 0; 89 | } 90 | 91 | 92 | /* Top Navigation Style */ 93 | 94 | .codrops-links { 95 | position: relative; 96 | display: inline-block; 97 | text-align: center; 98 | white-space: nowrap; 99 | border: 2px solid #161619; 100 | } 101 | 102 | .codrops-links::after { 103 | position: absolute; 104 | top: 50%; 105 | left: 50%; 106 | margin-left: -1px; 107 | width: 2px; 108 | height: 110%; 109 | background: #161619; 110 | content: ''; 111 | -webkit-transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg); 112 | transform: translateY(-50%) rotate3d(0, 0, 1, 22.5deg); 113 | } 114 | 115 | .codrops-icon { 116 | display: inline-block; 117 | margin: 0.5em; 118 | padding: 0em 0; 119 | width: 1.5em; 120 | text-decoration: none; 121 | color: #7faa3d; 122 | } 123 | 124 | .codrops-icon span { 125 | display: none; 126 | } 127 | 128 | .codrops-icon:before { 129 | margin: 0 5px; 130 | text-transform: none; 131 | font-weight: normal; 132 | font-style: normal; 133 | font-variant: normal; 134 | font-family: 'codropsicons'; 135 | line-height: 1; 136 | speak: none; 137 | -webkit-font-smoothing: antialiased; 138 | } 139 | 140 | .codrops-icon--drop:before { 141 | content: "\e001"; 142 | } 143 | 144 | .codrops-icon--prev:before { 145 | content: "\e004"; 146 | } 147 | -------------------------------------------------------------------------------- /fonts/codropsicons/codropsicons.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | This is a custom SVG font generated by IcoMoon. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /js/modernizr-custom.js: -------------------------------------------------------------------------------- 1 | /*! modernizr 3.2.0 (Custom Build) | MIT * 2 | * http://modernizr.com/download/?-cssanimations-csstransitions-preserve3d-prefixed !*/ 3 | !function(e,n,t){function r(e,n){return typeof e===n}function s(){var e,n,t,s,o,i,a;for(var f in C)if(C.hasOwnProperty(f)){if(e=[],n=C[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;tp;p++)if(v=e[p],h=T.style[v],a(v,"-")&&(v=i(v)),T.style[v]!==t){if(o||r(s,"undefined"))return l(),"pfx"==n?v:!0;try{T.style[v]=s}catch(g){}if(T.style[v]!=h)return l(),"pfx"==n?v:!0}return l(),!1}function h(e,n,t,s,o){var i=e.charAt(0).toUpperCase()+e.slice(1),a=(e+" "+b.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?v(a,n,s,o):(a=(e+" "+N.join(i+" ")+i).split(" "),u(a,n,t))}function y(e,n,r){return h(e,t,t,n,r)}var g=[],C=[],_={_version:"3.2.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){C.push({name:e,fn:n,options:t})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=_,Modernizr=new Modernizr;var w=n.documentElement,x="svg"===w.nodeName.toLowerCase(),S="Moz O ms Webkit",b=_._config.usePrefixes?S.split(" "):[];_._cssomPrefixes=b;var E=function(n){var r,s=prefixes.length,o=e.CSSRule;if("undefined"==typeof o)return t;if(!n)return!1;if(n=n.replace(/^@/,""),r=n.replace(/-/g,"_").toUpperCase()+"_RULE",r in o)return"@"+n;for(var i=0;s>i;i++){var a=prefixes[i],f=a.toUpperCase()+"_"+r;if(f in o)return"@-"+a.toLowerCase()+"-"+n}return!1};_.atRule=E;var N=_._config.usePrefixes?S.toLowerCase().split(" "):[];_._domPrefixes=N;var P={elem:f("modernizr")};Modernizr._q.push(function(){delete P.elem});var T={style:P.elem.style};Modernizr._q.unshift(function(){delete T.style}),_.testAllProps=h;_.prefixed=function(e,n,t){return 0===e.indexOf("@")?E(e):(-1!=e.indexOf("-")&&(e=i(e)),n?h(e,n,t):h(e,"pfx"))};_.testAllProps=y,Modernizr.addTest("cssanimations",y("animationName","a",!0)),Modernizr.addTest("preserve3d",y("transformStyle","preserve-3d")),Modernizr.addTest("csstransitions",y("transition","all",!0)),s(),o(g),delete _.addTest,delete _.addAsyncTest;for(var z=0;z 2 | 3 | 4 | 5 | 6 | 7 | Interactive Room Display | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | Previous Demo 23 | Back to the Codrops article 24 |
25 |

Room Display based on Spaces by Bilal

26 |
27 |

View on a larger screen to see the 3D display

28 |

Your browser does not support preserve-3d!

29 |
30 |
31 |
32 |
33 |
34 | Side 35 |
36 | Horse 37 |
38 |

Deco Horse

39 |
$59
40 | 41 |
42 | 43 |
44 |
45 |
46 | Front 47 |
48 | Blanket 49 |
50 |

Blanket

51 |
$129
52 | 53 |
54 | 55 |
56 |
57 | Picture 58 |
59 |

Golden Frame

60 |
$39
61 | 62 |
63 | 64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 | Front 74 |
75 | Vase 76 |
77 |

Deco Pillow

78 |
$29
79 | 80 |
81 | 82 |
83 |
84 | Lamp 85 |
86 |

Swedish Lamp

87 |
$89
88 | 89 |
90 | 91 |
92 |
93 | Silver Vase 94 |
95 |

Silver Vase

96 |
$49
97 | 98 |
99 | 100 |
101 |
102 |
103 | Side 104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | Side 113 |
114 | Shakers 115 |
116 |

Shaker Set

117 |
$59
118 | 119 |
120 | 121 |
122 |
123 | Coffee Machine 124 |
125 |

Coffee Machine

126 |
$149
127 | 128 |
129 | 130 |
131 |
132 |
133 | Front 134 |
135 | Bowl Set 136 |
137 |

Bowl Set

138 |
$49
139 | 140 |
141 | 142 |
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 | Side 152 |
153 |
154 | Front 155 |
156 | Sink 157 |
158 |

Grohe Sink

159 |
$399
160 | 161 |
162 | 163 |
164 |
165 | Pillows 166 |
167 |

Pillow Set

168 |
$69
169 | 170 |
171 | 172 |
173 |
174 |
175 | Front 176 |
177 | Bidet 178 |
179 |

Grohe Bidet

180 |
$259
181 | 182 |
183 | 184 |
185 |
186 |
187 |
188 |
189 | 195 |
196 |

The Bedroom Relax

197 |

The Living Room Socialize

198 |

The Kitchen Create

199 |

The Bathroom Refresh

200 |
201 |
202 | 203 | 204 | 209 | 210 | 211 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | /* Main slideshow container */ 2 | 3 | .slideshow { 4 | position: relative; 5 | display: -webkit-flex; 6 | display: flex; 7 | -webkit-justify-content: center; 8 | justify-content: center; 9 | -webkit-align-items: center; 10 | align-items: center; 11 | overflow: hidden; 12 | width: 100vw; 13 | height: 100vh; 14 | -webkit-user-select: none; 15 | -moz-user-select: none; 16 | -ms-user-select: none; 17 | user-select: none; 18 | -webkit-touch-callout: none; 19 | -khtml-user-select: none; 20 | } 21 | 22 | 23 | /* Single slide */ 24 | 25 | .slide { 26 | position: absolute; 27 | top: 0; 28 | left: 0; 29 | display: -webkit-flex; 30 | display: flex; 31 | -webkit-flex-direction: column; 32 | flex-direction: column; 33 | -webkit-justify-content: center; 34 | justify-content: center; 35 | -webkit-align-items: center; 36 | align-items: center; 37 | width: 100vw; 38 | height: 100vh; 39 | pointer-events: none; 40 | opacity: 0; 41 | -webkit-perspective: 1800px; 42 | perspective: 1800px; 43 | } 44 | 45 | .slide--current { 46 | z-index: 1000; 47 | pointer-events: auto; 48 | opacity: 1; 49 | } 50 | 51 | .titles { 52 | position: absolute; 53 | z-index: 1000; 54 | bottom: 0; 55 | left: 0; 56 | width: 100%; 57 | min-height: 115px; 58 | text-align: center; 59 | pointer-events: none; 60 | } 61 | 62 | .title { 63 | font-size: 1.85em; 64 | font-weight: 700; 65 | position: absolute; 66 | bottom: 0; 67 | left: 0; 68 | width: 100%; 69 | margin: 0; 70 | padding: 1em; 71 | text-align: center; 72 | white-space: nowrap; 73 | opacity: 0; 74 | color: #7faa3d; 75 | -webkit-transition: opacity 0.3s; 76 | transition: opacity 0.3s; 77 | } 78 | 79 | .title--current { 80 | opacity: 1; 81 | } 82 | 83 | .title__sub { 84 | font-size: 0.5em; 85 | line-height: 1; 86 | display: block; 87 | margin-top: 0.25em; 88 | white-space: nowrap; 89 | text-indent: 5px; 90 | letter-spacing: 5px; 91 | text-transform: uppercase; 92 | color: #333; 93 | } 94 | 95 | .title__sub::before, 96 | .title__sub::after { 97 | content: '\2014'; 98 | } 99 | 100 | 101 | /* Navigation */ 102 | 103 | .nav { 104 | position: fixed; 105 | z-index: 5000; 106 | top: 2em; 107 | right: 2em; 108 | display: -webkit-flex; 109 | display: flex; 110 | -webkit-flex-wrap: wrap; 111 | flex-wrap: wrap; 112 | -webkit-justify-content: center; 113 | justify-content: center; 114 | -webkit-align-items: center; 115 | align-items: center; 116 | width: 58px; 117 | } 118 | 119 | .no-preserve3d .nav { 120 | display: none; 121 | } 122 | 123 | .nav__item { 124 | position: relative; 125 | display: block; 126 | overflow: hidden; 127 | width: 25px; 128 | height: 25px; 129 | margin: 2px; 130 | cursor: pointer; 131 | border: 2px solid #7faa3d; 132 | } 133 | 134 | .nav__item::after { 135 | content: ''; 136 | position: absolute; 137 | top: 3px; 138 | left: 3px; 139 | width: 15px; 140 | height: 15px; 141 | opacity: 0; 142 | background: #7faa3d; 143 | -webkit-transition: opacity 0.3s; 144 | transition: opacity 0.3s; 145 | } 146 | 147 | .nav__item:hover::after { 148 | opacity: 0.2; 149 | } 150 | 151 | .nav__item.nav__item--current::after { 152 | opacity: 1; 153 | } 154 | 155 | .text-hidden { 156 | position: absolute; 157 | top: 200%; 158 | pointer-events: none; 159 | opacity: 0; 160 | } 161 | 162 | 163 | /* Scene element */ 164 | 165 | .scene { 166 | height: 500px; 167 | margin: 0 auto; 168 | -webkit-transform-style: preserve-3d; 169 | transform-style: preserve-3d; 170 | -webkit-transition: -webkit-transform 0.1s; 171 | transition: transform 0.1s; 172 | } 173 | 174 | .views { 175 | position: relative; 176 | display: -webkit-flex; 177 | display: flex; 178 | -webkit-align-items: center; 179 | align-items: center; 180 | width: 100%; 181 | height: 100%; 182 | pointer-events: none; 183 | -webkit-transform-style: preserve-3d; 184 | transform-style: preserve-3d; 185 | } 186 | 187 | .view__img { 188 | display: block; 189 | } 190 | 191 | .view { 192 | z-index: 1; 193 | -webkit-flex: none; 194 | flex: none; 195 | height: 100%; 196 | -webkit-transform-style: preserve-3d; 197 | transform-style: preserve-3d; 198 | } 199 | 200 | .view--rotate-right { 201 | margin-right: -1px; 202 | -webkit-transform-origin: 100% 50%; 203 | transform-origin: 100% 50%; 204 | } 205 | 206 | .view--rotate-left { 207 | margin-left: -1px; 208 | -webkit-transform-origin: 0% 50%; 209 | transform-origin: 0% 50%; 210 | } 211 | 212 | .view__img { 213 | max-height: 100%; 214 | } 215 | 216 | .item { 217 | position: absolute; 218 | z-index: 1; 219 | pointer-events: none; 220 | -webkit-transform-style: preserve-3d; 221 | transform-style: preserve-3d; 222 | } 223 | 224 | .item--popup { 225 | z-index: 10000; 226 | pointer-events: auto; 227 | } 228 | 229 | .item::before { 230 | content: ''; 231 | position: absolute; 232 | width: 100%; 233 | height: 100%; 234 | opacity: 0; 235 | background: #ececec; 236 | box-shadow: 0 0 0 40px #ececec, 0 0 0 45px #000; 237 | -webkit-transform: scale3d(0.7, 0.7, 1); 238 | transform: scale3d(0.7, 0.7, 1); 239 | -webkit-transform-origin: 100% 0%; 240 | transform-origin: 100% 0%; 241 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 242 | transition: transform 0.3s, opacity 0.3s; 243 | } 244 | 245 | .item.item--popup::before { 246 | opacity: 1; 247 | -webkit-transform: scale3d(1, 1, 1); 248 | transform: scale3d(1, 1, 1); 249 | -webkit-transition-duration: 0.3s; 250 | transition-duration: 0.3s; 251 | } 252 | 253 | .item__img { 254 | position: relative; 255 | display: block; 256 | max-height: 100%; 257 | margin: 0 auto; 258 | pointer-events: auto; 259 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); 260 | -webkit-transition: -webkit-transform 0.3s; 261 | transition: transform 0.3s; 262 | } 263 | 264 | .item--popup .item__img { 265 | box-shadow: none; 266 | } 267 | 268 | .view-open .item:not(.item--popup) .item__img { 269 | -webkit-transition: -webkit-transform 0.1s; 270 | transition: transform 0.1s; 271 | } 272 | 273 | .views:not(.view-open) .item__img:hover { 274 | cursor: pointer; 275 | box-shadow: 0 0 0 4px #000; 276 | } 277 | 278 | .item__info { 279 | line-height: 1; 280 | position: relative; 281 | min-width: 150px; 282 | margin: 3em 0 -1em; 283 | text-align: center; 284 | opacity: 0; 285 | -webkit-transform: translate3d(0, -15px, 0); 286 | transform: translate3d(0, -15px, 0); 287 | } 288 | 289 | .item--popup .item__info { 290 | opacity: 1; 291 | -webkit-transform: translate3d(0, 0, 0); 292 | transform: translate3d(0, 0, 0); 293 | -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; 294 | transition: transform 0.3s, opacity 0.3s; 295 | } 296 | 297 | .item__title { 298 | font-size: 0.75em; 299 | font-weight: 700; 300 | margin: 0; 301 | padding: 0 0 0.5em 0; 302 | letter-spacing: 2px; 303 | text-transform: uppercase; 304 | } 305 | 306 | .item__price { 307 | font-size: 1.5em; 308 | font-weight: 700; 309 | line-height: 1.5; 310 | display: inline-block; 311 | vertical-align: middle; 312 | } 313 | 314 | .item__price sup { 315 | font-size: 0.5em; 316 | color: #aaa; 317 | } 318 | 319 | .currency { 320 | vertical-align: super; 321 | } 322 | 323 | .button { 324 | margin: 0; 325 | padding: 0; 326 | border: none; 327 | background: none; 328 | -webkit-font-smoothing: antialiased; 329 | -moz-osx-font-smoothing: grayscale; 330 | } 331 | 332 | .button--buy { 333 | font-size: 24px; 334 | display: inline-block; 335 | width: 40px; 336 | height: 40px; 337 | margin: 4px 0 0 0; 338 | vertical-align: middle; 339 | color: #7faa3d; 340 | -webkit-transition: color 0.3s, background-color 0.3s; 341 | transition: color 0.3s, background-color 0.3s; 342 | } 343 | 344 | .button--buy:hover, 345 | .button--buy:focus { 346 | color: #333; 347 | outline: none; 348 | } 349 | 350 | .button--close { 351 | position: absolute; 352 | top: -35px; 353 | right: -35px; 354 | pointer-events: none; 355 | opacity: 0; 356 | color: #000; 357 | } 358 | 359 | .item--popup .button--close { 360 | pointer-events: auto; 361 | opacity: 1; 362 | -webkit-transition: opacity 0.3s 0.15s; 363 | transition: opacity 0.3s 0.15s; 364 | } 365 | 366 | .button--close:hover, 367 | .button--close:focus { 368 | outline: none; 369 | } 370 | 371 | 372 | /* Indiviudal items */ 373 | 374 | 375 | /* Bedroom */ 376 | 377 | .item--horse { 378 | top: 124px; 379 | left: -27px; 380 | } 381 | 382 | .item--horse .item__img { 383 | height: 55px; 384 | } 385 | 386 | .item--blanket { 387 | top: 314px; 388 | left: 199px; 389 | } 390 | 391 | .item--blanket .item__img { 392 | height: 70px; 393 | } 394 | 395 | .item--picture { 396 | top: 188px; 397 | left: 353px; 398 | } 399 | 400 | .item--picture .item__img { 401 | height: 76px; 402 | } 403 | 404 | 405 | /* Living */ 406 | 407 | .item--pillow { 408 | top: 294px; 409 | left: 85px; 410 | } 411 | 412 | .item--pillow .item__img { 413 | height: 62px; 414 | } 415 | 416 | .item--lamp { 417 | top: 253px; 418 | left: 312px; 419 | } 420 | 421 | .item--lamp .item__img { 422 | height: 86px; 423 | } 424 | 425 | .item--silvervase { 426 | top: 210px; 427 | left: 449px; 428 | } 429 | 430 | .item--silvervase .item__img { 431 | height: 81px; 432 | } 433 | 434 | 435 | /* Kitchen */ 436 | 437 | .item--bowls { 438 | top: 92px; 439 | left: -27px; 440 | } 441 | 442 | .item--bowls .item__img { 443 | height: 39px; 444 | } 445 | 446 | .item--coffeemachine { 447 | top: 199px; 448 | left: 317px; 449 | } 450 | 451 | .item--coffeemachine .item__img { 452 | height: 68px; 453 | } 454 | 455 | .item--shakers { 456 | top: 195px; 457 | left: 143px; 458 | } 459 | 460 | .item--shakers .item__img { 461 | height: 114px; 462 | } 463 | 464 | 465 | /* Bathroom */ 466 | 467 | .item--pillows { 468 | top: 271px; 469 | left: 188px; 470 | } 471 | 472 | .item--pillows .item__img { 473 | height: 64px; 474 | } 475 | 476 | .item--bidet { 477 | top: 347px; 478 | left: 116px; 479 | } 480 | 481 | .item--bidet .item__img { 482 | height: 129px; 483 | } 484 | 485 | .item--sink { 486 | top: 246px; 487 | left: 45px; 488 | } 489 | 490 | .item--sink .item__img { 491 | height: 98px; 492 | } 493 | 494 | @media screen and (max-height: 42em) { 495 | .slideshow { 496 | padding-top: 7em; 497 | } 498 | .titles { 499 | top: 0; 500 | right: 4em; 501 | left: auto; 502 | width: auto; 503 | margin: 0; 504 | } 505 | .title { 506 | font-size: 1.35em; 507 | top: 0; 508 | right: 0; 509 | bottom: auto; 510 | left: auto; 511 | width: auto; 512 | padding: 1.75em 2em; 513 | } 514 | } 515 | 516 | @media screen and (max-width: 52.8em), 517 | screen and (max-height: 32em) { 518 | .info--size { 519 | display: block; 520 | } 521 | .slideshow { 522 | display: block; 523 | overflow: visible; 524 | margin-top: 2em; 525 | padding: 0; 526 | } 527 | .slideshow, 528 | .slide, 529 | .slide .view { 530 | width: 100%; 531 | height: auto; 532 | } 533 | .views { 534 | display: block; 535 | } 536 | .view, 537 | .item, 538 | .item__img, 539 | .scene { 540 | -webkit-transform: none !important; 541 | transform: none !important; 542 | } 543 | .slide--current { 544 | position: relative; 545 | } 546 | .view__img { 547 | display: none; 548 | } 549 | .scene { 550 | width: 100%; 551 | height: auto; 552 | } 553 | .nav { 554 | position: relative; 555 | top: auto; 556 | top: 100%; 557 | right: auto; 558 | display: block; 559 | width: 100%; 560 | margin: 2em 0 0 0; 561 | text-align: center; 562 | } 563 | .nav__item { 564 | display: inline-block; 565 | } 566 | .titles { 567 | position: relative; 568 | right: auto; 569 | -webkit-flex: none; 570 | flex: none; 571 | margin: 0; 572 | } 573 | .title { 574 | top: 0; 575 | bottom: auto; 576 | width: 100%; 577 | padding: 1em; 578 | } 579 | .item { 580 | position: relative; 581 | top: 0; 582 | left: 0; 583 | margin: 10px; 584 | padding: 1em; 585 | pointer-events: auto; 586 | background: #fff; 587 | } 588 | .item::before { 589 | display: none; 590 | } 591 | .item__img { 592 | float: left; 593 | max-width: 100%; 594 | height: 75px !important; 595 | box-shadow: none; 596 | } 597 | .item__info { 598 | margin: 1em 0 0 0; 599 | text-align: right; 600 | opacity: 1; 601 | -webkit-transform: translate3d(0, 0, 0); 602 | transform: translate3d(0, 0, 0); 603 | } 604 | .slideshow [class^='from-'], 605 | [class*=' from-'] { 606 | opacity: 0; 607 | -webkit-animation: fadeIn 1s forwards !important; 608 | animation: fadeIn 1s forwards !important; 609 | } 610 | .slideshow [class^='to-'], 611 | [class*=' to-'] { 612 | -webkit-animation: fadeOut 1s forwards !important; 613 | animation: fadeOut 1s forwards !important; 614 | } 615 | .slideshow [class^='to-'], 616 | [class*=' to-'] .scene, 617 | .slideshow [class^='to-'], 618 | [class*=' to-'] .view--rotate, 619 | .slideshow [class^='from-'], 620 | [class*=' from-'] .scene, 621 | .slideshow [class^='from-'], 622 | [class*=' from-'] .view--rotate { 623 | -webkit-animation: none !important; 624 | animation: none !important; 625 | } 626 | @-webkit-keyframes fadeIn { 627 | from { 628 | opacity: 0; 629 | } 630 | to { 631 | opacity: 1; 632 | } 633 | } 634 | @keyframes fadeIn { 635 | from { 636 | opacity: 0; 637 | } 638 | to { 639 | opacity: 1; 640 | } 641 | } 642 | @-webkit-keyframes fadeOut { 643 | from { 644 | opacity: 1; 645 | } 646 | to { 647 | opacity: 0; 648 | } 649 | } 650 | @keyframes fadeOut { 651 | from { 652 | opacity: 1; 653 | } 654 | to { 655 | opacity: 0; 656 | } 657 | } 658 | .codrops-header { 659 | position: relative; 660 | padding: 1em; 661 | } 662 | } 663 | -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * main.js 3 | * http://www.codrops.com 4 | * 5 | * Licensed under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 8 | * Copyright 2015, Codrops 9 | * http://www.codrops.com 10 | */ 11 | ;(function(window) { 12 | 13 | 'use strict'; 14 | 15 | /**********************************************/ 16 | /** https://gist.github.com/desandro/1866474 **/ 17 | /**********************************************/ 18 | var lastTime = 0; 19 | var prefixes = 'webkit moz ms o'.split(' '); 20 | // get unprefixed rAF and cAF, if present 21 | var requestAnimationFrame = window.requestAnimationFrame; 22 | var cancelAnimationFrame = window.cancelAnimationFrame; 23 | // loop through vendor prefixes and get prefixed rAF and cAF 24 | var prefix; 25 | for( var i = 0; i < prefixes.length; i++ ) { 26 | if ( requestAnimationFrame && cancelAnimationFrame ) { 27 | break; 28 | } 29 | prefix = prefixes[i]; 30 | requestAnimationFrame = requestAnimationFrame || window[ prefix + 'RequestAnimationFrame' ]; 31 | cancelAnimationFrame = cancelAnimationFrame || window[ prefix + 'CancelAnimationFrame' ] || 32 | window[ prefix + 'CancelRequestAnimationFrame' ]; 33 | } 34 | 35 | // fallback to setTimeout and clearTimeout if either request/cancel is not supported 36 | if ( !requestAnimationFrame || !cancelAnimationFrame ) { 37 | requestAnimationFrame = function( callback, element ) { 38 | var currTime = new Date().getTime(); 39 | var timeToCall = Math.max( 0, 16 - ( currTime - lastTime ) ); 40 | var id = window.setTimeout( function() { 41 | callback( currTime + timeToCall ); 42 | }, timeToCall ); 43 | lastTime = currTime + timeToCall; 44 | return id; 45 | }; 46 | 47 | cancelAnimationFrame = function( id ) { 48 | window.clearTimeout( id ); 49 | }; 50 | } 51 | /**********************************************/ 52 | /** https://gist.github.com/desandro/1866474 **/ 53 | /**********************************************/ 54 | 55 | 56 | var support = { animations : Modernizr.cssanimations, transitions : Modernizr.csstransitions, preserve3d : Modernizr.preserve3d }, 57 | animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' }, 58 | animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ], 59 | onEndAnimation = function( el, callback ) { 60 | var onEndCallbackFn = function( ev ) { 61 | if( support.animations ) { 62 | if( ev.target != this ) return; 63 | this.removeEventListener( animEndEventName, onEndCallbackFn ); 64 | } 65 | if( callback && typeof callback === 'function' ) { callback.call(); } 66 | }; 67 | if( support.animations ) { 68 | el.addEventListener( animEndEventName, onEndCallbackFn ); 69 | } 70 | else { 71 | onEndCallbackFn(); 72 | } 73 | }, 74 | transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, 75 | transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], 76 | onEndTransition = function( el, callback ) { 77 | var onEndCallbackFn = function( ev ) { 78 | if( support.transitions ) { 79 | if( ev.target != this ) return; 80 | this.removeEventListener( transEndEventName, onEndCallbackFn ); 81 | } 82 | if( callback && typeof callback === 'function' ) { callback.call(this); } 83 | }; 84 | if( support.transitions ) { 85 | el.addEventListener( transEndEventName, onEndCallbackFn ); 86 | } 87 | else { 88 | onEndCallbackFn(); 89 | } 90 | }; 91 | 92 | function extend( a, b ) { 93 | for( var key in b ) { 94 | if( b.hasOwnProperty( key ) ) { 95 | a[key] = b[key]; 96 | } 97 | } 98 | return a; 99 | } 100 | 101 | function throttle(fn, delay) { 102 | var allowSample = true; 103 | 104 | return function(e) { 105 | if (allowSample) { 106 | allowSample = false; 107 | setTimeout(function() { allowSample = true; }, delay); 108 | fn(e); 109 | } 110 | }; 111 | } 112 | 113 | // from http://www.quirksmode.org/js/events_properties.html#position 114 | function getMousePos(e) { 115 | var posx = 0; 116 | var posy = 0; 117 | if (!e) var e = window.event; 118 | if (e.pageX || e.pageY) { 119 | posx = e.pageX; 120 | posy = e.pageY; 121 | } 122 | else if (e.clientX || e.clientY) { 123 | posx = e.clientX + document.body.scrollLeft 124 | + document.documentElement.scrollLeft; 125 | posy = e.clientY + document.body.scrollTop 126 | + document.documentElement.scrollTop; 127 | } 128 | return { 129 | x : posx, 130 | y : posy 131 | } 132 | } 133 | 134 | function Slideshow(el, options) { 135 | // if no support for preserve3d then return 136 | if( !support.preserve3d ) { 137 | return false; 138 | } 139 | 140 | this.el = el; 141 | this.options = extend( {}, this.options ); 142 | extend( this.options, options ); 143 | 144 | // the slides 145 | this.slides = [].slice.call(this.el.querySelectorAll('.slide')); 146 | // total slides 147 | this.slidesTotal = this.slides.length; 148 | // the items 149 | this.items = [].slice.call(this.el.querySelectorAll('.item')); 150 | // the navigation wrapper 151 | this.nav = this.el.querySelector('.nav'); 152 | // the navigation controls/anchors 153 | this.navCtrls = [].slice.call(this.nav.querySelectorAll('.nav__item')); 154 | // the titles 155 | this.titles = [].slice.call(this.el.querySelectorAll('.titles > .title')); 156 | // index of current slide 157 | this.current = 0; 158 | 159 | this._init(); 160 | } 161 | 162 | Slideshow.prototype.options = { 163 | // how much each slider/scene will rotate when the user moves the mouse 164 | movement : { 165 | rotateX : 5, // a relative rotation of -5deg to 5deg on the x-axis 166 | rotateY : 10 // a relative rotation of -10deg to 10deg on the y-axis 167 | } 168 | }; 169 | 170 | Slideshow.prototype._init = function() { 171 | // update current elements 172 | this._updateCurrent(); 173 | 174 | // set current slide, current navigation element and current title 175 | classie.add(this.currentSlide, 'slide--current'); 176 | classie.add(this.navCtrls[this.current], 'nav__item--current'); 177 | classie.add(this.titles[this.current], 'title--current'); 178 | 179 | // set items images transforms 180 | this.items.forEach(function(item) { 181 | var itemImg = item.querySelector('img'); 182 | itemImg.style.WebkitTransform = itemImg.style.transform = 'translate3d(0,0,' + itemImg.getAttribute('data-transform-z') + 'px)'; 183 | }); 184 | 185 | // bind events 186 | this._initEvents(); 187 | }; 188 | 189 | Slideshow.prototype._updateCurrent = function() { 190 | this.currentSlide = this.slides[this.current]; 191 | this.currentScene = this.currentSlide.querySelector('.scene'); 192 | this.slideSizes = {width : this.currentSlide.offsetWidth, height : this.currentSlide.offsetHeight}; 193 | }; 194 | 195 | Slideshow.prototype._initEvents = function() { 196 | var self = this; 197 | 198 | // navigation events 199 | this.navCtrls.forEach(function(navEl, pos) { 200 | navEl.addEventListener('click', function(ev) { 201 | ev.preventDefault(); 202 | self._navigate(pos); 203 | 204 | // mouse position relative to the document. 205 | var mousepos = getMousePos(ev); 206 | // apply the rotation to the slide, i.e the upcoming slide/scene will be already transformed proportionally to the mouse position 207 | self._rotateSlide(mousepos); 208 | }); 209 | }); 210 | 211 | // item's events 212 | this.items.forEach(function(item) { 213 | // open the item 214 | item.querySelector('img').addEventListener('click', function() { 215 | self._openItem(item); 216 | }); 217 | 218 | // close the item 219 | item.querySelector('.button--close').addEventListener('click', function() { 220 | self._closeItem(item); 221 | }); 222 | }); 223 | 224 | // mousemove event / tilt functionality 225 | document.addEventListener('mousemove', function(ev) { 226 | requestAnimationFrame(function() { 227 | if( self.lockedTilt ) return; 228 | // mouse position relative to the document. 229 | var mousepos = getMousePos(ev); 230 | // apply the rotation to the slide. This will depend on the mouse position 231 | self._rotateSlide(mousepos); 232 | }); 233 | }); 234 | 235 | // keyboard navigation events 236 | document.addEventListener('keydown', function(ev) { 237 | var keyCode = ev.keyCode || ev.which; 238 | if( keyCode !== 37 && keyCode !== 38 && keyCode !== 39 && keyCode !== 40 ) return; 239 | 240 | switch (keyCode) { 241 | // left 242 | case 37: 243 | if( self.current - 1 >= 0 ) { 244 | self._navigate(self.current - 1); 245 | } 246 | break; 247 | // right 248 | case 39: 249 | if( self.current + 1 < self.slidesTotal ) { 250 | self._navigate(self.current + 1); 251 | } 252 | break; 253 | // down 254 | case 40: 255 | if( self.current + 2 < self.slidesTotal ) { 256 | self._navigate(self.current + 2); 257 | } 258 | break; 259 | // up 260 | case 38: 261 | if( self.current - 2 >= 0 ) { 262 | self._navigate(self.current - 2); 263 | } 264 | break; 265 | } 266 | // mouse position relative to the document. 267 | var mousepos = {x : window.innerWidth/2, y : window.innerHeight/2}; 268 | // apply the rotation to the slide. This will depend on the mouse position 269 | self._rotateSlide(mousepos); 270 | }); 271 | 272 | // window resize: update view sizes 273 | window.addEventListener('resize', throttle(function(ev) { 274 | self.slideSizes = {width : self.currentSlide.offsetWidth, height : self.currentSlide.offsetHeight}; 275 | }, 10)); 276 | }; 277 | 278 | Slideshow.prototype._openItem = function(item) { 279 | if( this.isItemOpen ) { 280 | return false; 281 | } 282 | // item is now open 283 | this.isItemOpen = true; 284 | 285 | // the view (item's parent) gets a higher z-index so that other views don't overlap 286 | var view = item.parentNode; 287 | view.style.zIndex = 10; 288 | 289 | // the view's parent (.views) gets the class view-open. This allows us to control the transitions of all the other items 290 | var views = view.parentNode; 291 | classie.add(views, 'view-open'); 292 | 293 | // while the item is open, the tilt movement (mousemove) gets disabled 294 | this.lockedTilt = true; 295 | this.currentScene.style.WebkitTransform = this.currentScene.style.transform = 'rotate3d(1,1,0,0deg)'; 296 | 297 | // class for the popup 298 | classie.add(item, 'item--popup'); 299 | 300 | // scale up the item's image and reset translateZ value 301 | var itemImg = item.querySelector('img'); 302 | itemImg.style.WebkitTransform = itemImg.style.transform = 'translate3d(0,0,0) scale3d(1.3, 1.3, 1)'; 303 | 304 | // now, reset the other item's images transforms, so when we open an item, all others "move down" 305 | [].slice.call(views.querySelectorAll('.item > img')).forEach(function(img) { 306 | if( itemImg != img ) { 307 | img.style.WebkitTransform = img.style.transform = 'translate3d(0,0,0)'; 308 | } 309 | }); 310 | 311 | // the current open item 312 | this.currentOpenItem = item; 313 | }; 314 | 315 | Slideshow.prototype._closeItem = function(item) { 316 | var item = item || this.currentOpenItem; 317 | 318 | // item is now closed 319 | this.isItemOpen = false; 320 | 321 | // the view (item's parent) and its parent 322 | var view = item.parentNode, views = view.parentNode; 323 | 324 | // remove class view-open from views (This allows us to control the transitions of all the other items) 325 | classie.remove(views, 'view-open'); 326 | 327 | // remove the popup class from the item 328 | classie.remove(item, 'item--popup'); 329 | 330 | // reset the item's image transform 331 | var itemImg = item.querySelector('img'), 332 | self = this; 333 | 334 | setTimeout(function() { 335 | itemImg.style.WebkitTransform = itemImg.style.transform = 'translate3d(0,0,' + itemImg.getAttribute('data-transform-z') + 'px)'; 336 | 337 | // after the transition is done.. 338 | onEndTransition(itemImg, function() { 339 | // reset the view's z-index 340 | view.style.zIndex = 1; 341 | 342 | // the tilt movement (mousemove) gets enabled again 343 | self.lockedTilt = false; 344 | }); 345 | }, 60); 346 | 347 | // now, reset the other item's images transforms ("move up") 348 | [].slice.call(views.querySelectorAll('.item > img')).forEach(function(img) { 349 | if( itemImg != img ) { 350 | img.style.WebkitTransform = img.style.transform = 'translate3d(0,0,' + img.getAttribute('data-transform-z') + 'px)'; 351 | } 352 | }); 353 | }; 354 | 355 | Slideshow.prototype._navigate = function(pos) { 356 | if( this.isAnimating || this.current === pos ) { 357 | return false; 358 | } 359 | this.isAnimating = true; 360 | 361 | // close the open item if any 362 | if( this.isItemOpen ) { 363 | this._closeItem(); 364 | } 365 | 366 | // get the navigation direction 367 | var direction = this._getNavDirection(pos); 368 | 369 | // set current navigation element 370 | classie.remove(this.navCtrls[this.current], 'nav__item--current'); 371 | classie.add(this.navCtrls[pos], 'nav__item--current'); 372 | 373 | // hide current slide title 374 | classie.remove(this.titles[this.current], 'title--current'); 375 | 376 | // current slide and next slide 377 | var currentSlide = this.slides[this.current], 378 | nextSlide = this.slides[pos]; 379 | 380 | // update current value 381 | this.current = pos; 382 | // update current elements 383 | this._updateCurrent(); 384 | 385 | // apply animation classes 386 | classie.add(currentSlide, 'to-' + direction.out); 387 | classie.add(nextSlide, 'from-' + direction.in); 388 | 389 | var self = this; 390 | onEndAnimation(nextSlide, function() { 391 | classie.remove(currentSlide, 'to-' + direction.out); 392 | classie.remove(nextSlide, 'from-' + direction.in); 393 | 394 | classie.remove(currentSlide, 'slide--current'); 395 | classie.add(nextSlide, 'slide--current'); 396 | 397 | // show current slide title 398 | classie.add(self.titles[pos], 'title--current'); 399 | 400 | self.isAnimating = false; 401 | }); 402 | }; 403 | 404 | Slideshow.prototype._rotateSlide = function(mousepos) { 405 | // transform values 406 | var rotX = this.options.movement.rotateX ? 2 * this.options.movement.rotateX / this.slideSizes.height * mousepos.y - this.options.movement.rotateX : 0, 407 | rotY = this.options.movement.rotateY ? 2 * this.options.movement.rotateY / this.slideSizes.width * mousepos.x - this.options.movement.rotateY : 0; 408 | 409 | this.currentScene.style.WebkitTransform = this.currentScene.style.transform = 'rotate3d(1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg)'; 410 | }; 411 | 412 | Slideshow.prototype._getNavDirection = function(pos) { 413 | var direction = {}, 414 | isEven = function(val) { return (val%2 == 0); } 415 | 416 | if( isEven(this.current) && isEven(pos) || !isEven(this.current) && !isEven(pos) ) { 417 | if( this.current < pos ) { 418 | direction.in = 'bottom'; 419 | direction.out = 'top'; 420 | } 421 | else { 422 | direction.in = 'top'; 423 | direction.out = 'bottom'; 424 | } 425 | } 426 | else if( isEven(this.current) ) { 427 | if( pos === this.current + 1 ) { 428 | direction.in = 'right'; 429 | direction.out = 'left'; 430 | } 431 | else if( pos < this.current ) { 432 | direction.in = 'topright'; 433 | direction.out = 'bottomleft'; 434 | } 435 | else { 436 | direction.in = 'bottomright'; 437 | direction.out = 'topleft'; 438 | } 439 | } 440 | else { 441 | if( pos === this.current - 1 ) { 442 | direction.in = 'left'; 443 | direction.out = 'right'; 444 | } 445 | else if( pos < this.current ) { 446 | direction.in = 'topleft'; 447 | direction.out = 'bottomright'; 448 | } 449 | else { 450 | direction.in = 'bottomleft'; 451 | direction.out = 'topright'; 452 | } 453 | } 454 | 455 | return direction; 456 | }; 457 | 458 | window.Slideshow = Slideshow; 459 | 460 | })(window); -------------------------------------------------------------------------------- /css/animations.css: -------------------------------------------------------------------------------- 1 | /* Slide animations */ 2 | [class^="from-"], [class*=" from-"] { 3 | opacity: 1; 4 | } 5 | 6 | /* "To" animations */ 7 | 8 | /*******************************************/ 9 | /*******************************************/ 10 | /* To top left */ 11 | /*******************************************/ 12 | /*******************************************/ 13 | .to-topleft { 14 | -webkit-animation: toTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 15 | animation: toTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 16 | } 17 | 18 | @-webkit-keyframes toTopLeft { 19 | to { 20 | -webkit-transform: translate3d(-100%, -100%, 0); 21 | transform: translate3d(-100%, -100%, 0); 22 | } 23 | } 24 | 25 | @keyframes toTopLeft { 26 | to { 27 | -webkit-transform: translate3d(-100%, -100%, 0); 28 | transform: translate3d(-100%, -100%, 0); 29 | } 30 | } 31 | 32 | .to-topleft .scene { 33 | -webkit-animation: toTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 34 | animation: toTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 35 | } 36 | 37 | @-webkit-keyframes toTopLeftScene { 38 | to { 39 | -webkit-transform: rotate3d(1, 1, 0.5, 30deg); 40 | transform: rotate3d(1, 1, 0.5, 30deg); 41 | } 42 | } 43 | 44 | @keyframes toTopLeftScene { 45 | to { 46 | -webkit-transform: rotate3d(1, 1, 0.5, 30deg); 47 | transform: rotate3d(1, 1, 0.5, 30deg); 48 | } 49 | } 50 | 51 | .to-topleft .view--rotate { 52 | -webkit-animation: toTopLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 53 | animation: toTopLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 54 | } 55 | 56 | @-webkit-keyframes toTopLeftViewRotate { 57 | to { 58 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 59 | transform: rotate3d(0, 1, 0, 30deg); 60 | } 61 | } 62 | 63 | @keyframes toTopLeftViewRotate { 64 | to { 65 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 66 | transform: rotate3d(0, 1, 0, 30deg); 67 | } 68 | } 69 | 70 | /*******************************************/ 71 | /*******************************************/ 72 | /* To top */ 73 | /*******************************************/ 74 | /*******************************************/ 75 | .to-top { 76 | -webkit-animation: toTop 1s cubic-bezier(0.6,0,0.4,1) forwards; 77 | animation: toTop 1s cubic-bezier(0.6,0,0.4,1) forwards; 78 | } 79 | 80 | @-webkit-keyframes toTop { 81 | to { 82 | -webkit-transform: translate3d(0, -100%, 0); 83 | transform: translate3d(0, -100%, 0); 84 | } 85 | } 86 | 87 | @keyframes toTop { 88 | to { 89 | -webkit-transform: translate3d(0, -100%, 0); 90 | transform: translate3d(0, -100%, 0); 91 | } 92 | } 93 | 94 | .to-top .scene { 95 | -webkit-animation: toTopScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 96 | animation: toTopScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 97 | } 98 | 99 | @-webkit-keyframes toTopScene { 100 | to { 101 | -webkit-transform: rotate3d(1, 0.5, 0.2, 30deg); 102 | transform: rotate3d(1, 0.5, 0.2, 30deg); 103 | } 104 | } 105 | 106 | @keyframes toTopScene { 107 | to { 108 | -webkit-transform: rotate3d(1, 0.5, 0.2, 30deg); 109 | transform: rotate3d(1, 0.5, 0.2, 30deg); 110 | } 111 | } 112 | 113 | .to-top .view--rotate { 114 | -webkit-animation: toTopViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 115 | animation: toTopViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 116 | } 117 | 118 | @-webkit-keyframes toTopViewRotate { 119 | to { 120 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 121 | transform: rotate3d(0, 1, 0, -30deg); 122 | } 123 | } 124 | 125 | @keyframes toTopViewRotate { 126 | to { 127 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 128 | transform: rotate3d(0, 1, 0, -30deg); 129 | } 130 | } 131 | 132 | /*******************************************/ 133 | /*******************************************/ 134 | /* To topright */ 135 | /*******************************************/ 136 | /*******************************************/ 137 | .to-topright { 138 | -webkit-animation: toTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 139 | animation: toTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 140 | } 141 | 142 | @-webkit-keyframes toTopRight { 143 | to { 144 | -webkit-transform: translate3d(100%, -100%, 0); 145 | transform: translate3d(100%, -100%, 0); 146 | } 147 | } 148 | 149 | @keyframes toTopRight { 150 | to { 151 | -webkit-transform: translate3d(100%, -100%, 0); 152 | transform: translate3d(100%, -100%, 0); 153 | } 154 | } 155 | 156 | .to-topright .scene { 157 | -webkit-animation: toTopRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 158 | animation: toTopRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 159 | } 160 | 161 | @-webkit-keyframes toTopRightScene { 162 | to { 163 | -webkit-transform: rotate3d(1, 1, 0.5, -30deg); 164 | transform: rotate3d(1, 1, 0.5, -30deg); 165 | } 166 | } 167 | 168 | @keyframes toTopRightScene { 169 | to { 170 | -webkit-transform: rotate3d(1, 1, 0.5, -30deg); 171 | transform: rotate3d(1, 1, 0.5, -30deg); 172 | } 173 | } 174 | 175 | .to-topright .view--rotate { 176 | -webkit-animation: toTopRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 177 | animation: toTopRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 178 | } 179 | 180 | @-webkit-keyframes toTopRightViewRotate { 181 | to { 182 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 183 | transform: rotate3d(0, 1, 0, -30deg); 184 | } 185 | } 186 | 187 | @keyframes toTopRightViewRotate { 188 | to { 189 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 190 | transform: rotate3d(0, 1, 0, -30deg); 191 | } 192 | } 193 | 194 | /*******************************************/ 195 | /*******************************************/ 196 | /* To right */ 197 | /*******************************************/ 198 | /*******************************************/ 199 | .to-right { 200 | -webkit-animation: toRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 201 | animation: toRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 202 | } 203 | 204 | @-webkit-keyframes toRight { 205 | to { 206 | -webkit-transform: translate3d(100%, 0, 0); 207 | transform: translate3d(100%, 0, 0); 208 | } 209 | } 210 | 211 | @keyframes toRight { 212 | to { 213 | -webkit-transform: translate3d(100%, 0, 0); 214 | transform: translate3d(100%, 0, 0); 215 | } 216 | } 217 | 218 | .to-right .scene { 219 | -webkit-animation: toRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 220 | animation: toRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 221 | } 222 | 223 | @-webkit-keyframes toRightScene { 224 | to { 225 | -webkit-transform: rotate3d(0, 1, 0, -60deg); 226 | transform: rotate3d(0, 1, 0, -60deg); 227 | } 228 | } 229 | 230 | @keyframes toRightScene { 231 | to { 232 | -webkit-transform: rotate3d(0, 1, 0, -60deg); 233 | transform: rotate3d(0, 1, 0, -60deg); 234 | } 235 | } 236 | 237 | .to-right .view--rotate { 238 | -webkit-animation: toRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 239 | animation: toRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 240 | } 241 | 242 | @-webkit-keyframes toRightViewRotate { 243 | to { 244 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 245 | transform: rotate3d(0, 1, 0, -50deg); 246 | } 247 | } 248 | 249 | @keyframes toRightViewRotate { 250 | to { 251 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 252 | transform: rotate3d(0, 1, 0, -50deg); 253 | } 254 | } 255 | 256 | /*******************************************/ 257 | /*******************************************/ 258 | /* To bottom right */ 259 | /*******************************************/ 260 | /*******************************************/ 261 | .to-bottomright { 262 | -webkit-animation: toBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 263 | animation: toBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 264 | } 265 | 266 | @-webkit-keyframes toBottomRight { 267 | to { 268 | -webkit-transform: translate3d(100%, 100%, 0); 269 | transform: translate3d(100%, 100%, 0); 270 | } 271 | } 272 | 273 | @keyframes toBottomRight { 274 | to { 275 | -webkit-transform: translate3d(100%, 100%, 0); 276 | transform: translate3d(100%, 100%, 0); 277 | } 278 | } 279 | 280 | .to-bottomright .scene { 281 | -webkit-animation: toBottomRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 282 | animation: toBottomRightScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 283 | } 284 | 285 | @-webkit-keyframes toBottomRightScene { 286 | to { 287 | -webkit-transform: rotate3d(-1, 1, 0.5, -30deg); 288 | transform: rotate3d(-1, 1, 0.5, -30deg); 289 | } 290 | } 291 | 292 | @keyframes toBottomRightScene { 293 | to { 294 | -webkit-transform: rotate3d(-1, 1, 0.5, -30deg); 295 | transform: rotate3d(-1, 1, 0.5, -30deg); 296 | } 297 | } 298 | 299 | .to-bottomright .view--rotate { 300 | -webkit-animation: toBottomRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 301 | animation: toBottomRightViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 302 | } 303 | 304 | @-webkit-keyframes toBottomRightViewRotate { 305 | to { 306 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 307 | transform: rotate3d(0, 1, 0, -30deg); 308 | } 309 | } 310 | 311 | @keyframes toBottomRightViewRotate { 312 | to { 313 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 314 | transform: rotate3d(0, 1, 0, -30deg); 315 | } 316 | } 317 | 318 | /*******************************************/ 319 | /*******************************************/ 320 | /* To bottom */ 321 | /*******************************************/ 322 | /*******************************************/ 323 | .to-bottom { 324 | -webkit-animation: toBottom 1s cubic-bezier(0.6,0,0.4,1) forwards; 325 | animation: toBottom 1s cubic-bezier(0.6,0,0.4,1) forwards; 326 | } 327 | 328 | @-webkit-keyframes toBottom { 329 | to { 330 | -webkit-transform: translate3d(0, 100%, 0); 331 | transform: translate3d(0, 100%, 0); 332 | } 333 | } 334 | 335 | @keyframes toBottom { 336 | to { 337 | -webkit-transform: translate3d(0, 100%, 0); 338 | transform: translate3d(0, 100%, 0); 339 | } 340 | } 341 | 342 | .to-bottom .scene { 343 | -webkit-animation: toBottomScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 344 | animation: toBottomScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 345 | } 346 | 347 | @-webkit-keyframes toBottomScene { 348 | to { 349 | -webkit-transform: rotate3d(-1, -0.5, 0.2, 30deg); 350 | transform: rotate3d(-1, -0.5, 0.2, 30deg); 351 | } 352 | } 353 | 354 | @keyframes toBottomScene { 355 | to { 356 | -webkit-transform: rotate3d(-1, -0.5, 0.2, 30deg); 357 | transform: rotate3d(-1, -0.5, 0.2, 30deg); 358 | } 359 | } 360 | 361 | .to-bottom .view--rotate { 362 | -webkit-animation: toBottomViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 363 | animation: toBottomViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 364 | } 365 | 366 | @-webkit-keyframes toBottomViewRotate { 367 | to { 368 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 369 | transform: rotate3d(0, 1, 0, 30deg); 370 | } 371 | } 372 | 373 | @keyframes toBottomViewRotate { 374 | to { 375 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 376 | transform: rotate3d(0, 1, 0, 30deg); 377 | } 378 | } 379 | 380 | /*******************************************/ 381 | /*******************************************/ 382 | /* To bottom left */ 383 | /*******************************************/ 384 | /*******************************************/ 385 | .to-bottomleft { 386 | -webkit-animation: toBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 387 | animation: toBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 388 | } 389 | 390 | @-webkit-keyframes toBottomLeft { 391 | to { 392 | -webkit-transform: translate3d(-100%, 100%, 0); 393 | transform: translate3d(-100%, 100%, 0); 394 | } 395 | } 396 | 397 | @keyframes toBottomLeft { 398 | to { 399 | -webkit-transform: translate3d(-100%, 100%, 0); 400 | transform: translate3d(-100%, 100%, 0); 401 | } 402 | } 403 | 404 | .to-bottomleft .scene { 405 | -webkit-animation: toBottomLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 406 | animation: toBottomLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 407 | } 408 | 409 | @-webkit-keyframes toBottomLeftScene { 410 | to { 411 | -webkit-transform: rotate3d(-1, 1, 0.5, 30deg); 412 | transform: rotate3d(-1, 1, 0.5, 30deg); 413 | } 414 | } 415 | 416 | @keyframes toBottomLeftScene { 417 | to { 418 | -webkit-transform: rotate3d(-1, 1, 0.5, 30deg); 419 | transform: rotate3d(-1, 1, 0.5, 30deg); 420 | } 421 | } 422 | 423 | .to-bottomleft .view--rotate { 424 | -webkit-animation: toBottomLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 425 | animation: toBottomLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 426 | } 427 | 428 | @-webkit-keyframes toBottomLeftViewRotate { 429 | to { 430 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 431 | transform: rotate3d(0, 1, 0, 30deg); 432 | } 433 | } 434 | 435 | @keyframes toBottomLeftViewRotate { 436 | to { 437 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 438 | transform: rotate3d(0, 1, 0, 30deg); 439 | } 440 | } 441 | 442 | /*******************************************/ 443 | /*******************************************/ 444 | /* To left */ 445 | /*******************************************/ 446 | /*******************************************/ 447 | .to-left { 448 | -webkit-animation: toLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 449 | animation: toLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 450 | } 451 | 452 | @-webkit-keyframes toLeft { 453 | to { 454 | -webkit-transform: translate3d(-100%, 0, 0); 455 | transform: translate3d(-100%, 0, 0); 456 | } 457 | } 458 | 459 | @keyframes toLeft { 460 | to { 461 | -webkit-transform: translate3d(-100%, 0, 0); 462 | transform: translate3d(-100%, 0, 0); 463 | } 464 | } 465 | 466 | .to-left .scene { 467 | -webkit-animation: toLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 468 | animation: toLeftScene .8s cubic-bezier(0.6,0,0.4,1) forwards; 469 | } 470 | 471 | @-webkit-keyframes toLeftScene { 472 | to { 473 | -webkit-transform: rotate3d(0, 1, 0, 60deg); 474 | transform: rotate3d(0, 1, 0, 60deg); 475 | } 476 | } 477 | 478 | @keyframes toLeftScene { 479 | to { 480 | -webkit-transform: rotate3d(0, 1, 0, 60deg); 481 | transform: rotate3d(0, 1, 0, 60deg); 482 | } 483 | } 484 | 485 | .to-left .view--rotate { 486 | -webkit-animation: toLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 487 | animation: toLeftViewRotate .8s cubic-bezier(0.6,0,0.4,1) forwards; 488 | } 489 | 490 | @-webkit-keyframes toLeftViewRotate { 491 | to { 492 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 493 | transform: rotate3d(0, 1, 0, 50deg); 494 | } 495 | } 496 | 497 | @keyframes toLeftViewRotate { 498 | to { 499 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 500 | transform: rotate3d(0, 1, 0, 50deg); 501 | } 502 | } 503 | 504 | /* "From" animations */ 505 | 506 | /*******************************************/ 507 | /*******************************************/ 508 | /* From top left */ 509 | /*******************************************/ 510 | /*******************************************/ 511 | .from-topleft { 512 | -webkit-animation: fromTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 513 | animation: fromTopLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 514 | } 515 | 516 | @-webkit-keyframes fromTopLeft { 517 | from { 518 | -webkit-transform: translate3d(-100%, -100%, 0); 519 | transform: translate3d(-100%, -100%, 0); 520 | } 521 | to { 522 | -webkit-transform: translate3d(0, 0, 0); 523 | transform: translate3d(0, 0, 0); 524 | } 525 | } 526 | 527 | @keyframes fromTopLeft { 528 | from { 529 | -webkit-transform: translate3d(-100%, -100%, 0); 530 | transform: translate3d(-100%, -100%, 0); 531 | } 532 | to { 533 | -webkit-transform: translate3d(0, 0, 0); 534 | transform: translate3d(0, 0, 0); 535 | } 536 | } 537 | 538 | .from-topleft .scene { 539 | -webkit-animation: fromTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 540 | animation: fromTopLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 541 | } 542 | 543 | @-webkit-keyframes fromTopLeftScene { 544 | from { 545 | -webkit-transform: rotate3d(1, 1, -1, -50deg); 546 | transform: rotate3d(1, 1, -1, -50deg); 547 | } 548 | } 549 | 550 | @keyframes fromTopLeftScene { 551 | from { 552 | -webkit-transform: rotate3d(1, 1, -1, -50deg); 553 | transform: rotate3d(1, 1, -1, -50deg); 554 | } 555 | } 556 | 557 | .from-topleft .view--rotate { 558 | -webkit-animation: fromTopLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 559 | animation: fromTopLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 560 | } 561 | 562 | @-webkit-keyframes fromTopLeftViewRotate { 563 | from { 564 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 565 | transform: rotate3d(0, 1, 0, 50deg); 566 | } 567 | } 568 | 569 | @keyframes fromTopLeftViewRotate { 570 | from { 571 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 572 | transform: rotate3d(0, 1, 0, 50deg); 573 | } 574 | } 575 | 576 | /*******************************************/ 577 | /*******************************************/ 578 | /* From top */ 579 | /*******************************************/ 580 | /*******************************************/ 581 | .from-top { 582 | -webkit-animation: fromTop 1s cubic-bezier(0.6,0,0.4,1) forwards; 583 | animation: fromTop 1s cubic-bezier(0.6,0,0.4,1) forwards; 584 | } 585 | 586 | @-webkit-keyframes fromTop { 587 | from { 588 | -webkit-transform: translate3d(0, -100%, 0); 589 | transform: translate3d(0, -100%, 0); 590 | } 591 | to { 592 | -webkit-transform: translate3d(0, 0, 0); 593 | transform: translate3d(0, 0, 0); 594 | } 595 | } 596 | 597 | @keyframes fromTop { 598 | from { 599 | -webkit-transform: translate3d(0, -100%, 0); 600 | transform: translate3d(0, -100%, 0); 601 | } 602 | to { 603 | -webkit-transform: translate3d(0, 0, 0); 604 | transform: translate3d(0, 0, 0); 605 | } 606 | } 607 | 608 | .from-top .scene { 609 | -webkit-animation: fromTopScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 610 | animation: fromTopScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 611 | } 612 | 613 | @-webkit-keyframes fromTopScene { 614 | from { 615 | -webkit-transform: rotate3d(1, -0.5, -0.2, 30deg); 616 | transform: rotate3d(1, -0.5, -0.2, 30deg); 617 | } 618 | } 619 | 620 | @keyframes fromTopScene { 621 | from { 622 | -webkit-transform: rotate3d(1, -0.5, -0.2, 30deg); 623 | transform: rotate3d(1, -0.5, -0.2, 30deg); 624 | } 625 | } 626 | 627 | .from-top .view--rotate { 628 | -webkit-animation: fromTopViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 629 | animation: fromTopViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 630 | } 631 | 632 | @-webkit-keyframes fromTopViewRotate { 633 | from { 634 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 635 | transform: rotate3d(0, 1, 0, 30deg); 636 | } 637 | } 638 | 639 | @keyframes fromTopViewRotate { 640 | from { 641 | -webkit-transform: rotate3d(0, 1, 0, 30deg); 642 | transform: rotate3d(0, 1, 0, 30deg); 643 | } 644 | } 645 | 646 | /*******************************************/ 647 | /*******************************************/ 648 | /* From top right */ 649 | /*******************************************/ 650 | /*******************************************/ 651 | .from-topright { 652 | -webkit-animation: fromTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 653 | animation: fromTopRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 654 | } 655 | 656 | @-webkit-keyframes fromTopRight { 657 | from { 658 | -webkit-transform: translate3d(100%, -100%, 0); 659 | transform: translate3d(100%, -100%, 0); 660 | } 661 | to { 662 | -webkit-transform: translate3d(0, 0, 0); 663 | transform: translate3d(0, 0, 0); 664 | } 665 | } 666 | 667 | @keyframes fromTopRight { 668 | from { 669 | -webkit-transform: translate3d(100%, -100%, 0); 670 | transform: translate3d(100%, -100%, 0); 671 | } 672 | to { 673 | -webkit-transform: translate3d(0, 0, 0); 674 | transform: translate3d(0, 0, 0); 675 | } 676 | } 677 | 678 | .from-topright .scene { 679 | -webkit-animation: fromTopRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 680 | animation: fromTopRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 681 | } 682 | 683 | @-webkit-keyframes fromTopRightScene { 684 | from { 685 | -webkit-transform: rotate3d(-1, 1, -1, 50deg); 686 | transform: rotate3d(-1, 1, -1, 50deg); 687 | } 688 | } 689 | 690 | @keyframes fromTopRightScene { 691 | from { 692 | -webkit-transform: rotate3d(-1, 1, -1, 50deg); 693 | transform: rotate3d(-1, 1, -1, 50deg); 694 | } 695 | } 696 | 697 | .from-topright .view--rotate { 698 | -webkit-animation: fromTopRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 699 | animation: fromTopRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 700 | } 701 | 702 | @-webkit-keyframes fromTopRightViewRotate { 703 | from { 704 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 705 | transform: rotate3d(0, 1, 0, -50deg); 706 | } 707 | } 708 | 709 | @keyframes fromTopRightViewRotate { 710 | from { 711 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 712 | transform: rotate3d(0, 1, 0, -50deg); 713 | } 714 | } 715 | 716 | /*******************************************/ 717 | /*******************************************/ 718 | /* From right */ 719 | /*******************************************/ 720 | /*******************************************/ 721 | .from-right { 722 | -webkit-animation: fromRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 723 | animation: fromRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 724 | } 725 | 726 | @-webkit-keyframes fromRight { 727 | from { 728 | -webkit-transform: translate3d(100%, 0, 0); 729 | transform: translate3d(100%, 0, 0); 730 | } 731 | to { 732 | -webkit-transform: translate3d(0, 0, 0); 733 | transform: translate3d(0, 0, 0); 734 | } 735 | } 736 | 737 | @keyframes fromRight { 738 | from { 739 | -webkit-transform: translate3d(100%, 0, 0); 740 | transform: translate3d(100%, 0, 0); 741 | } 742 | to { 743 | -webkit-transform: translate3d(0, 0, 0); 744 | transform: translate3d(0, 0, 0); 745 | } 746 | } 747 | 748 | .from-right .scene { 749 | -webkit-animation: fromRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 750 | animation: fromRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 751 | } 752 | 753 | @-webkit-keyframes fromRightScene { 754 | from { 755 | -webkit-transform: rotate3d(0, 1, 0, -60deg); 756 | transform: rotate3d(0, 1, 0, -60deg); 757 | } 758 | } 759 | 760 | @keyframes fromRightScene { 761 | from { 762 | -webkit-transform: rotate3d(0, 1, 0, -60deg); 763 | transform: rotate3d(0, 1, 0, -60deg); 764 | } 765 | } 766 | 767 | .from-right .view--rotate { 768 | -webkit-animation: fromRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 769 | animation: fromRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 770 | } 771 | 772 | @-webkit-keyframes fromRightViewRotate { 773 | from { 774 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 775 | transform: rotate3d(0, 1, 0, -50deg); 776 | } 777 | } 778 | 779 | @keyframes fromRightViewRotate { 780 | from { 781 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 782 | transform: rotate3d(0, 1, 0, -50deg); 783 | } 784 | } 785 | 786 | /*******************************************/ 787 | /*******************************************/ 788 | /* From bottom right */ 789 | /*******************************************/ 790 | /*******************************************/ 791 | .from-bottomright { 792 | -webkit-animation: fromBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 793 | animation: fromBottomRight 1s cubic-bezier(0.6,0,0.4,1) forwards; 794 | } 795 | 796 | @-webkit-keyframes fromBottomRight { 797 | from { 798 | -webkit-transform: translate3d(100%, 100%, 0); 799 | transform: translate3d(100%, 100%, 0); 800 | } 801 | to { 802 | -webkit-transform: translate3d(0, 0, 0); 803 | transform: translate3d(0, 0, 0); 804 | } 805 | } 806 | 807 | @keyframes fromBottomRight { 808 | from { 809 | -webkit-transform: translate3d(100%, 100%, 0); 810 | transform: translate3d(100%, 100%, 0); 811 | } 812 | to { 813 | -webkit-transform: translate3d(0, 0, 0); 814 | transform: translate3d(0, 0, 0); 815 | } 816 | } 817 | 818 | .from-bottomright .scene { 819 | -webkit-animation: fromBottomRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 820 | animation: fromBottomRightScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 821 | } 822 | 823 | @-webkit-keyframes fromBottomRightScene { 824 | from { 825 | -webkit-transform: rotate3d(1, 1, 1, 50deg); 826 | transform: rotate3d(1, 1, 1, 50deg); 827 | } 828 | } 829 | 830 | @keyframes fromBottomRightScene { 831 | from { 832 | -webkit-transform: rotate3d(1, 1, 1, 50deg); 833 | transform: rotate3d(1, 1, 1, 50deg); 834 | } 835 | } 836 | 837 | .from-bottomright .view--rotate { 838 | -webkit-animation: fromBottomRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 839 | animation: fromBottomRightViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 840 | } 841 | 842 | @-webkit-keyframes fromBottomRightViewRotate { 843 | from { 844 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 845 | transform: rotate3d(0, 1, 0, -50deg); 846 | } 847 | } 848 | 849 | @keyframes fromBottomRightViewRotate { 850 | from { 851 | -webkit-transform: rotate3d(0, 1, 0, -50deg); 852 | transform: rotate3d(0, 1, 0, -50deg); 853 | } 854 | } 855 | 856 | /*******************************************/ 857 | /*******************************************/ 858 | /* From bottom */ 859 | /*******************************************/ 860 | /*******************************************/ 861 | .from-bottom { 862 | -webkit-animation: fromBottom 1s cubic-bezier(0.6,0,0.4,1) forwards; 863 | animation: fromBottom 1s cubic-bezier(0.6,0,0.4,1) forwards; 864 | } 865 | 866 | @-webkit-keyframes fromBottom { 867 | from { 868 | -webkit-transform: translate3d(0, 100%, 0); 869 | transform: translate3d(0, 100%, 0); 870 | } 871 | to { 872 | -webkit-transform: translate3d(0, 0, 0); 873 | transform: translate3d(0, 0, 0); 874 | } 875 | } 876 | 877 | @keyframes fromBottom { 878 | from { 879 | -webkit-transform: translate3d(0, 100%, 0); 880 | transform: translate3d(0, 100%, 0); 881 | } 882 | to { 883 | -webkit-transform: translate3d(0, 0, 0); 884 | transform: translate3d(0, 0, 0); 885 | } 886 | } 887 | 888 | .from-bottom .scene { 889 | -webkit-animation: fromBottomScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 890 | animation: fromBottomScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 891 | } 892 | 893 | @-webkit-keyframes fromBottomScene { 894 | from { 895 | -webkit-transform: rotate3d(1, 0.5, 0.2, 30deg); 896 | transform: rotate3d(1, 0.5, 0.2, 30deg); 897 | } 898 | } 899 | 900 | @keyframes fromBottomScene { 901 | from { 902 | -webkit-transform: rotate3d(1, 0.5, 0.2, 30deg); 903 | transform: rotate3d(1, 0.5, 0.2, 30deg); 904 | } 905 | } 906 | 907 | .from-bottom .view--rotate { 908 | -webkit-animation: fromBottomViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 909 | animation: fromBottomViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 910 | } 911 | 912 | @-webkit-keyframes fromBottomViewRotate { 913 | from { 914 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 915 | transform: rotate3d(0, 1, 0, -30deg); 916 | } 917 | } 918 | 919 | @keyframes fromBottomViewRotate { 920 | from { 921 | -webkit-transform: rotate3d(0, 1, 0, -30deg); 922 | transform: rotate3d(0, 1, 0, -30deg); 923 | } 924 | } 925 | 926 | /*******************************************/ 927 | /*******************************************/ 928 | /* From bottom left */ 929 | /*******************************************/ 930 | /*******************************************/ 931 | .from-bottomleft { 932 | -webkit-animation: fromBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 933 | animation: fromBottomLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 934 | } 935 | 936 | @-webkit-keyframes fromBottomLeft { 937 | from { 938 | -webkit-transform: translate3d(-100%, 100%, 0); 939 | transform: translate3d(-100%, 100%, 0); 940 | } 941 | to { 942 | -webkit-transform: translate3d(0, 0, 0); 943 | transform: translate3d(0, 0, 0); 944 | } 945 | } 946 | 947 | @keyframes fromBottomLeft { 948 | from { 949 | -webkit-transform: translate3d(-100%, 100%, 0); 950 | transform: translate3d(-100%, 100%, 0); 951 | } 952 | to { 953 | -webkit-transform: translate3d(0, 0, 0); 954 | transform: translate3d(0, 0, 0); 955 | } 956 | } 957 | 958 | .from-bottomleft .scene { 959 | -webkit-animation: fromBottomLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 960 | animation: fromBottomLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 961 | } 962 | 963 | @-webkit-keyframes fromBottomLeftScene { 964 | from { 965 | -webkit-transform: rotate3d(-1, 1, 1, -50deg); 966 | transform: rotate3d(-1, 1, 1, -50deg); 967 | } 968 | } 969 | 970 | @keyframes fromBottomLeftScene { 971 | from { 972 | -webkit-transform: rotate3d(-1, 1, 1, -50deg); 973 | transform: rotate3d(-1, 1, 1, -50deg); 974 | } 975 | } 976 | 977 | .from-bottomleft .view--rotate { 978 | -webkit-animation: fromBottomLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 979 | animation: fromBottomLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 980 | } 981 | 982 | @-webkit-keyframes fromBottomLeftViewRotate { 983 | from { 984 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 985 | transform: rotate3d(0, 1, 0, 50deg); 986 | } 987 | } 988 | 989 | @keyframes fromBottomLeftViewRotate { 990 | from { 991 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 992 | transform: rotate3d(0, 1, 0, 50deg); 993 | } 994 | } 995 | 996 | /*******************************************/ 997 | /*******************************************/ 998 | /* From left */ 999 | /*******************************************/ 1000 | /*******************************************/ 1001 | .from-left { 1002 | -webkit-animation: fromLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 1003 | animation: fromLeft 1s cubic-bezier(0.6,0,0.4,1) forwards; 1004 | } 1005 | 1006 | @-webkit-keyframes fromLeft { 1007 | from { 1008 | -webkit-transform: translate3d(-100%, 0, 0); 1009 | transform: translate3d(-100%, 0, 0); 1010 | } 1011 | to { 1012 | -webkit-transform: translate3d(0, 0, 0); 1013 | transform: translate3d(0, 0, 0); 1014 | } 1015 | } 1016 | 1017 | @keyframes fromLeft { 1018 | from { 1019 | -webkit-transform: translate3d(-100%, 0, 0); 1020 | transform: translate3d(-100%, 0, 0); 1021 | } 1022 | to { 1023 | -webkit-transform: translate3d(0, 0, 0); 1024 | transform: translate3d(0, 0, 0); 1025 | } 1026 | } 1027 | 1028 | .from-left .scene { 1029 | -webkit-animation: fromLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 1030 | animation: fromLeftScene 1s cubic-bezier(0.6,0,0.4,1) forwards; 1031 | } 1032 | 1033 | @-webkit-keyframes fromLeftScene { 1034 | from { 1035 | -webkit-transform: rotate3d(0, 1, 0, 60deg); 1036 | transform: rotate3d(0, 1, 0, 60deg); 1037 | } 1038 | } 1039 | 1040 | @keyframes fromLeftScene { 1041 | from { 1042 | -webkit-transform: rotate3d(0, 1, 0, 60deg); 1043 | transform: rotate3d(0, 1, 0, 60deg); 1044 | } 1045 | } 1046 | 1047 | .from-left .view--rotate { 1048 | -webkit-animation: fromLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 1049 | animation: fromLeftViewRotate 1s cubic-bezier(0.6,0,0.4,1) forwards; 1050 | } 1051 | 1052 | @-webkit-keyframes fromLeftViewRotate { 1053 | from { 1054 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 1055 | transform: rotate3d(0, 1, 0, 50deg); 1056 | } 1057 | } 1058 | 1059 | @keyframes fromLeftViewRotate { 1060 | from { 1061 | -webkit-transform: rotate3d(0, 1, 0, 50deg); 1062 | transform: rotate3d(0, 1, 0, 50deg); 1063 | } 1064 | } --------------------------------------------------------------------------------