├── .gitignore ├── README.md ├── css ├── component.css ├── demo.css ├── normalize.css └── pater.css ├── favicon.ico ├── img ├── 1.jpg ├── 10.jpg ├── 11.jpg ├── 12.jpg ├── 13.jpg ├── 14.jpg ├── 15.jpg ├── 2.jpg ├── 3.jpg ├── 4.jpg ├── 5.jpg ├── 6.jpg ├── 7.jpg ├── 8.jpg ├── 9.jpg ├── related │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ └── 4.jpg └── sponsor │ ├── bg.jpg │ ├── deco.png │ ├── deco2.svg │ └── jupiter_logo.svg ├── index.html ├── index2.html └── js ├── anime.min.js ├── imagesloaded.pkgd.min.js └── main.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Tilt Hover Effects 2 | 3 | Some ideas for hover effects with a fancy tilt effect. Inspired by the effect seen on [Kikk 2015](http://www.kikk.be/2015/) made by [Dogstudio](http://www.dogstudio.be/). 4 | 5 | [Article on Codrops](http://tympanus.net/codrops/?p=28860) 6 | 7 | [Demo](http://tympanus.net/Development/TiltHoverEffects/) 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 | 17 | - [Anime.js](http://anime-js.com) by Julian Garnier 18 | - [imagesLoaded](http://imagesloaded.desandro.com/) by David DeSandro 19 | 20 | ## Misc 21 | 22 | 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/), [Instagram](https://www.instagram.com/codropsss/) 23 | 24 | 25 | [© Codrops 2016](http://www.codrops.com) 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /css/component.css: -------------------------------------------------------------------------------- 1 | .tilter { 2 | display: block; 3 | position: relative; 4 | width: 300px; 5 | height: 415px; 6 | margin: 1.5em 2.5em; 7 | color: #fff; 8 | flex: none; 9 | perspective: 1000px; 10 | } 11 | 12 | .tilter * { 13 | pointer-events: none; 14 | } 15 | 16 | .tilter:hover, 17 | .tilter:focus { 18 | color: #fff; 19 | outline: none; 20 | } 21 | 22 | /* 23 | .tilter__figure, 24 | .tilter__deco, 25 | .tilter__caption { 26 | will-change: transform; 27 | }*/ 28 | 29 | .tilter__figure, 30 | .tilter__image { 31 | margin: 0; 32 | width: 100%; 33 | height: 100%; 34 | display: block; 35 | } 36 | 37 | .tilter__figure > * { 38 | transform: translateZ(0px); /* Force correct stacking order */ 39 | } 40 | 41 | .smooth .tilter__figure, 42 | .smooth .tilter__deco--overlay, 43 | .smooth .tilter__deco--lines, 44 | .smooth .tilter__deco--shine div, 45 | .smooth .tilter__caption { 46 | transition: transform 0.2s ease-out; 47 | } 48 | 49 | .tilter__figure { 50 | position: relative; 51 | } 52 | 53 | .tilter__figure::before { 54 | content: ''; 55 | position: absolute; 56 | width: 90%; 57 | height: 90%; 58 | top: 5%; 59 | left: 5%; 60 | box-shadow: 0 30px 20px rgba(35,32,39,0.5); 61 | } 62 | 63 | .tilter__deco { 64 | position: absolute; 65 | top: 0; 66 | left: 0; 67 | width: 100%; 68 | height: 100%; 69 | overflow: hidden; 70 | } 71 | 72 | .tilter__deco--overlay { 73 | background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4)); 74 | } 75 | 76 | .tilter__deco--shine div { 77 | position: absolute; 78 | width: 200%; 79 | height: 200%; 80 | top: -50%; 81 | left: -50%; 82 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); 83 | } 84 | 85 | .tilter__deco--lines { 86 | fill: none; 87 | stroke: #fff; 88 | stroke-width: 1.5px; 89 | } 90 | 91 | .tilter__caption { 92 | position: absolute; 93 | bottom: 0; 94 | width: 100%; 95 | padding: 4em; 96 | } 97 | 98 | .tilter__title { 99 | margin: 0; 100 | font-weight: normal; 101 | font-size: 2.5em; 102 | font-family: 'Abril Fatface', serif; 103 | line-height: 1; 104 | } 105 | 106 | .tilter__description { 107 | margin: 1em 0 0 0; 108 | font-size: 0.85em; 109 | letter-spacing: 0.15em; 110 | } 111 | 112 | /* Individual styles */ 113 | 114 | /* Example 1 (Default) */ 115 | .tilter--1 .tilter__figure::before { 116 | box-shadow: 0 30px 20px rgba(0,0,0,0.5); 117 | } 118 | 119 | /* Example 2 (thicker lines, overlay) */ 120 | .tilter--2, 121 | .tilter--2:hover, 122 | .tilter--2:focus { 123 | color: #2e27ad; 124 | } 125 | 126 | .tilter--2 .tilter__deco--overlay { 127 | background-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6)); 128 | } 129 | 130 | .tilter--2 .tilter__deco--lines { 131 | stroke: #2e27ad; 132 | stroke-width: 4px; 133 | } 134 | 135 | /* Example 3 (no lines, overlay hard-light) */ 136 | .tilter--3 .tilter__deco--overlay { 137 | background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6), rgba(41, 94, 230,0.5)); 138 | } 139 | 140 | .tilter--3 .tilter__caption { 141 | padding: 2em; 142 | text-align: right; 143 | text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35); 144 | } 145 | 146 | /* Example 4 (caption sliding in) */ 147 | .tilter--4 .tilter__deco--overlay { 148 | background-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6)); 149 | } 150 | 151 | @media screen and (min-width: 30em) { 152 | .tilter--4 .tilter__deco--lines { 153 | transform: scale3d(0.8,0.8,1); 154 | transition: transform 0.4s; 155 | } 156 | .tilter--4:hover .tilter__deco--lines { 157 | transform: scale3d(1,1,1); 158 | } 159 | .tilter--4 .tilter__title, 160 | .tilter--4 .tilter__description { 161 | transform: translate3d(0,80px,0); 162 | opacity: 0; 163 | transition: transform 0.4s, opacity 0.4s; 164 | } 165 | .tilter--4:hover .tilter__description { 166 | transition-delay: 0.1s; 167 | } 168 | .tilter--4:hover .tilter__title, 169 | .tilter--4:hover .tilter__description { 170 | transform: translate3d(0,0,0); 171 | opacity: 1; 172 | } 173 | } 174 | 175 | /* Example 5 (line animating) */ 176 | .tilter--5 .tilter__deco--lines path { 177 | stroke-dasharray: 1270; 178 | stroke-dashoffset: 1270; 179 | transition: stroke-dashoffset 0.7s; 180 | } 181 | 182 | .tilter--5:hover .tilter__deco--lines path { 183 | stroke-dashoffset: 0; 184 | } 185 | 186 | .tilter--5 .tilter__figure::before { 187 | box-shadow: none; 188 | } 189 | 190 | /* Example 6 (different line position) */ 191 | .tilter--6, 192 | .tilter--6:hover, 193 | .tilter--6:focus { 194 | color: #2e27ad; 195 | } 196 | 197 | .tilter--6 .tilter__deco--overlay { 198 | background-image: linear-gradient(45deg, rgba(46, 39, 173, 0.2), rgba(255, 186, 59, 0.58)); 199 | } 200 | 201 | .tilter--6 .tilter__deco--lines { 202 | stroke: #2e27ad; 203 | stroke-width: 6px; 204 | top: -50px; 205 | left: -50px; 206 | } 207 | 208 | .tilter--6 .tilter__caption { 209 | padding: 0 4em 5.5em 1em; 210 | } 211 | 212 | .tilter--6 .tilter__figure::before { 213 | box-shadow: none; 214 | } 215 | 216 | /* Example 7 (different line) */ 217 | .tilter--7 .tilter__deco--overlay { 218 | background-image: linear-gradient(45deg, rgba(93, 203, 106, 0.48), rgba(59, 239, 255, 0.58)); 219 | } 220 | 221 | .tilter--7 .tilter__deco--lines { 222 | stroke-width: 20px; 223 | transform: scale3d(0.9,0.9,1); 224 | opacity: 0; 225 | transition: transform 0.3s, opacity 0.3s; 226 | } 227 | 228 | .tilter--7:hover .tilter__deco--lines { 229 | opacity: 1; 230 | transform: scale3d(1,1,1); 231 | } 232 | 233 | .tilter--7 .tilter__figure::before { 234 | box-shadow: none; 235 | } 236 | 237 | /* Example 8 (different line) */ 238 | .tilter--8 { 239 | perspective: none; 240 | } 241 | 242 | .tilter--8 .tilter__figure { 243 | transform-style: flat; 244 | } 245 | 246 | .tilter--8 .tilter__deco--lines { 247 | stroke: #9255ae; 248 | stroke-width: 6px; 249 | mix-blend-mode: color-burn; 250 | } 251 | 252 | .tilter--8 .tilter__caption { 253 | color: #9255ae; 254 | mix-blend-mode: color-burn; 255 | } 256 | 257 | .tilter--8 .tilter__figure::before { 258 | box-shadow: none; 259 | } 260 | -------------------------------------------------------------------------------- /css/demo.css: -------------------------------------------------------------------------------- 1 | *, *::after, *::before { -webkit-box-sizing: border-box; box-sizing: border-box; } 2 | 3 | body { 4 | font-family: 'Roboto','Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif; 5 | color: #463f51; 6 | background: #222127; 7 | overflow-x: hidden; 8 | -webkit-font-smoothing: antialiased; 9 | -moz-osx-font-smoothing: grayscale; 10 | } 11 | 12 | a { 13 | outline: none; 14 | color: #694f9b; 15 | text-decoration: none; 16 | transition: color 0.2s; 17 | } 18 | 19 | a:hover, a:focus { 20 | color: #fff; 21 | } 22 | 23 | .hidden { 24 | position: absolute; 25 | overflow: hidden; 26 | width: 0; 27 | height: 0; 28 | pointer-events: none; 29 | } 30 | 31 | /* Icons */ 32 | .icon { 33 | display: block; 34 | width: 1.5em; 35 | height: 1.5em; 36 | margin: 0 auto; 37 | fill: currentColor; 38 | } 39 | 40 | /* Loader */ 41 | .js .loading::before { 42 | content: ''; 43 | position: fixed; 44 | color: #fff; 45 | top: 0; 46 | left: 0; 47 | width: 100%; 48 | height: 100%; 49 | background: rgba(206, 209, 223, 0.9); 50 | z-index: 100; 51 | text-align: center; 52 | display: -webkit-flex; 53 | display: -ms-flexbox; 54 | display: flex; 55 | } 56 | 57 | .js .loading::after { 58 | content: ''; 59 | position: fixed; 60 | top: 50%; 61 | left: 50%; 62 | width: 54px; 63 | height: 70px; 64 | margin: -35px 0 0 -27px; 65 | pointer-events: none; 66 | z-index: 10000; 67 | border: 4px solid #fff; 68 | -webkit-transition: opacity 0.3s; 69 | transition: opacity 0.3s; 70 | -webkit-animation: loaderAnim 0.8s ease-out infinite alternate forwards; 71 | animation: loaderAnim 0.8s ease-out infinite alternate forwards; 72 | } 73 | 74 | @-webkit-keyframes loaderAnim { 75 | to { 76 | opacity: 0.3; 77 | -webkit-transform: translate3d(0,-100px,0); 78 | transform: translate3d(0,-100px,0); 79 | } 80 | } 81 | 82 | @keyframes loaderAnim { 83 | to { 84 | opacity: 0.3; 85 | -webkit-transform: translate3d(0,-100px,0); 86 | transform: translate3d(0,-100px,0); 87 | } 88 | } 89 | 90 | /* Header */ 91 | .codrops-header { 92 | align-self: flex-start; 93 | position: relative; 94 | display: -webkit-flex; 95 | display: -ms-flexbox; 96 | display: flex; 97 | justify-content: center; 98 | text-align: center; 99 | -webkit-flex-direction: column; 100 | -ms-flex-direction: column; 101 | flex-direction: column; 102 | -webkit-flex-wrap: wrap; 103 | flex-wrap: wrap; 104 | -webkit-align-items: center; 105 | -ms-flex-align: center; 106 | align-items: center; 107 | width: 100%; 108 | padding: 3em 1em 4em; 109 | } 110 | 111 | .codrops-header__title { 112 | font-size: 2em; 113 | margin: 0; 114 | padding: 0; 115 | color: #7d5fb5; 116 | } 117 | 118 | .codrops-header__tagline { 119 | margin: 0; 120 | padding: 0 1em; 121 | } 122 | 123 | .codrops-demos { 124 | margin: 1em 0 0; 125 | } 126 | 127 | .codrops-demos a { 128 | border-bottom: 1px solid; 129 | display: inline-block; 130 | padding: 0.2em 0; 131 | transition: border-color 0.2s, color 0.2s; 132 | } 133 | 134 | .codrops-demos a:hover, 135 | .codrops-demos a:focus { 136 | border-color: transparent; 137 | } 138 | 139 | /* Top Navigation Style */ 140 | .codrops-links { 141 | position: relative; 142 | display: -webkit-flex; 143 | display: -ms-flexbox; 144 | display: flex; 145 | -webkit-justify-content: center; 146 | -ms-flex-pack: center; 147 | justify-content: center; 148 | text-align: center; 149 | white-space: nowrap; 150 | } 151 | 152 | .codrops-links::after { 153 | position: absolute; 154 | top: 15%; 155 | left: 50%; 156 | width: 1px; 157 | height: 70%; 158 | background: currentColor; 159 | opacity: 0.7; 160 | content: ''; 161 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg); 162 | transform: rotate3d(0, 0, 1, 22.5deg); 163 | } 164 | 165 | .codrops-icon { 166 | display: inline-block; 167 | margin: 0.5em; 168 | padding: 0.5em; 169 | } 170 | 171 | .github-icon { 172 | fill: #7d5fb5; 173 | color: #222127; 174 | position: absolute; 175 | top: 0; 176 | border: 0; 177 | right: 0; 178 | } 179 | 180 | .github-corner:hover .octo-arm { 181 | transform-origin: 130px 106px; 182 | animation: octocat-wave 560ms ease-in-out; 183 | } 184 | 185 | @keyframes octocat-wave { 186 | 0%, 100% { transform: rotate(0); } 187 | 20%, 60% { transform: rotate(-25deg); } 188 | 40%, 80% { transform: rotate(10deg); } 189 | } 190 | 191 | @media (max-width:500px) { 192 | .github-corner:hover .octo-arm { 193 | animation: none; 194 | } 195 | .github-corner .octo-arm { 196 | animation: octocat-wave 560ms ease-in-out; 197 | } 198 | } 199 | 200 | /* Content */ 201 | .content { 202 | padding: 0 0 4em; 203 | height: 800px; 204 | min-height: 100vh; 205 | display: flex; 206 | flex-wrap: wrap; 207 | align-items: center; 208 | justify-content: center; 209 | position: relative; 210 | } 211 | 212 | .content:not(:first-child) { 213 | padding: 4em 0; 214 | } 215 | 216 | .content--c2 { 217 | background: #e5f8a3; 218 | } 219 | 220 | .content--c3 { 221 | background: #2e27ad; 222 | } 223 | 224 | .content--c4 { 225 | background: #ffb59c; 226 | } 227 | 228 | .content--c5 { 229 | background: #e0f0f9; 230 | } 231 | 232 | .content--c6 { 233 | background: #232138; 234 | } 235 | 236 | .content--c7 { 237 | background: #99e4a2; 238 | } 239 | 240 | /* Related demos */ 241 | .content--related { 242 | height: auto; 243 | text-align: center; 244 | font-weight: bold; 245 | min-height: 0; 246 | padding-bottom: 10em !important; 247 | background: #f1ebf0; 248 | } 249 | 250 | .content--related > p { 251 | width: 100%; 252 | } 253 | 254 | .media-item { 255 | display: inline-block; 256 | padding: 1em; 257 | vertical-align: top; 258 | -webkit-transition: color 0.3s; 259 | transition: color 0.3s; 260 | } 261 | 262 | .media-item__img { 263 | max-width: 100%; 264 | opacity: 0.3; 265 | -webkit-transition: opacity 0.3s; 266 | transition: opacity 0.3s; 267 | } 268 | 269 | .media-item:hover .media-item__img, 270 | .media-item:focus .media-item__img { 271 | opacity: 1; 272 | } 273 | 274 | .media-item__title { 275 | margin: 0; 276 | padding: 0.5em; 277 | font-size: 1em; 278 | } 279 | 280 | @media screen and (max-width: 55.625em) { 281 | .content { 282 | height: auto; 283 | } 284 | } 285 | -------------------------------------------------------------------------------- /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;} -------------------------------------------------------------------------------- /css/pater.css: -------------------------------------------------------------------------------- 1 | .pater { 2 | position: absolute; 3 | left: 0; 4 | top: 0; 5 | height: 100%; 6 | width: 280px; 7 | text-align: center; 8 | display: flex; 9 | color: #fff; 10 | font-family: 'Avenir Next', Arial, sans-serif; 11 | font-style: italic; 12 | font-weight: 600; 13 | padding: 0 1.5em; 14 | pointer-events: none; 15 | z-index: 1000; 16 | } 17 | 18 | .loading .pater { 19 | display: none; 20 | } 21 | 22 | .pater-mobile::after, 23 | .pater::after { 24 | content: 'Sponsored by'; 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | padding: 1em; 29 | font-size: 0.75em; 30 | color: #33284a; 31 | } 32 | 33 | .pater:hover { 34 | pointer-events: auto; 35 | } 36 | 37 | .pater__svg { 38 | position: absolute; 39 | top: 0; 40 | left: 0; 41 | margin: 0; 42 | width: 100%; 43 | height: 100%; 44 | } 45 | 46 | .pater__clip { 47 | pointer-events: auto; 48 | } 49 | 50 | .pater__content { 51 | position: relative; 52 | z-index: 10; 53 | } 54 | 55 | .pater span { 56 | display: block; 57 | position: relative; 58 | } 59 | 60 | .pater__title, 61 | .pater__more { 62 | text-align: left; 63 | width: 100%; 64 | max-width: 163px; 65 | transition: opacity 0.3s; 66 | } 67 | 68 | .pater:hover .pater__title, 69 | .pater:hover .pater__more { 70 | opacity: 0; 71 | } 72 | 73 | .pater__more { 74 | text-decoration: underline; 75 | font-size: 0.85em; 76 | padding: 1em 0 0; 77 | } 78 | 79 | .pater__logo { 80 | max-width: 60%; 81 | display: block; 82 | margin: 2.5em auto 1em; 83 | transform: translate3d(-38px,0,0); 84 | transition: transform 0.3s; 85 | } 86 | 87 | .pater:hover .pater__logo { 88 | transform: translate3d(0,0,0); 89 | } 90 | 91 | .pater__hover { 92 | opacity: 0; 93 | pointer-events: none; 94 | transform: translate3d(-100px,0,0); 95 | } 96 | 97 | .pater__hover div:first-child { 98 | font-size: 1.5em; 99 | font-weight: normal; 100 | padding-bottom: 2em; 101 | margin-bottom: 1.25em; 102 | background: url(../img/sponsor/deco.png) no-repeat 50% 100%; 103 | } 104 | 105 | .pater__hover div:nth-child(3) { 106 | font-size: 0.75em; 107 | padding-top: 100px; 108 | margin-top: 4em; 109 | background: url(../img/sponsor/deco2.svg) no-repeat 50% 0%; 110 | } 111 | 112 | .pater:hover .pater__hover { 113 | opacity: 1; 114 | pointer-events: auto; 115 | transform: translate3d(0,0,0); 116 | transition: opacity 0.3s, transform 0.3s; 117 | transition-delay: 0.3s; 118 | } 119 | 120 | .pater__link { 121 | background: #fff; 122 | color: #33284a; 123 | padding: 0.85em 1.5em; 124 | margin: 0 auto; 125 | display: block; 126 | max-width: 180px; 127 | margin-top: 2em; 128 | transition: color 0.2s, background 0.2s; 129 | } 130 | 131 | .pater__link:hover { 132 | color: #fff; 133 | background: #33284a; 134 | cursor: pointer; 135 | } 136 | 137 | .pater-mobile { 138 | position: fixed; 139 | background: url(../img/sponsor/bg.jpg) no-repeat 50% 50%; 140 | background-size: 100% auto; 141 | bottom: 0; 142 | left: 0; 143 | width: 100%; 144 | padding: 1.75em 0em 0.5em 1em; 145 | z-index: 10000; 146 | display: none; 147 | align-items: center; 148 | } 149 | 150 | .pater-mobile::after { 151 | font-size: 0.65em; 152 | font-weight: bold; 153 | } 154 | 155 | .pater-mobile .pater__logo { 156 | width: 30%; 157 | max-width: 150px; 158 | margin: 0; 159 | transform: none; 160 | flex: none; 161 | } 162 | 163 | .pater-mobile .pater__title { 164 | display: block; 165 | color: #fff; 166 | font-size: 0.76em; 167 | padding: 0 0 0 3vw; 168 | max-width: none; 169 | } 170 | 171 | @media screen and (max-width: 55.625em) { 172 | .pater { 173 | display: none; 174 | } 175 | .pater-mobile { 176 | display: flex; 177 | } 178 | } -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/favicon.ico -------------------------------------------------------------------------------- /img/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/1.jpg -------------------------------------------------------------------------------- /img/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/10.jpg -------------------------------------------------------------------------------- /img/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/11.jpg -------------------------------------------------------------------------------- /img/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/12.jpg -------------------------------------------------------------------------------- /img/13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/13.jpg -------------------------------------------------------------------------------- /img/14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/14.jpg -------------------------------------------------------------------------------- /img/15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/15.jpg -------------------------------------------------------------------------------- /img/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/2.jpg -------------------------------------------------------------------------------- /img/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/3.jpg -------------------------------------------------------------------------------- /img/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/4.jpg -------------------------------------------------------------------------------- /img/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/5.jpg -------------------------------------------------------------------------------- /img/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/6.jpg -------------------------------------------------------------------------------- /img/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/7.jpg -------------------------------------------------------------------------------- /img/8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/8.jpg -------------------------------------------------------------------------------- /img/9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/9.jpg -------------------------------------------------------------------------------- /img/related/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/related/1.jpg -------------------------------------------------------------------------------- /img/related/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/related/2.jpg -------------------------------------------------------------------------------- /img/related/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/related/3.jpg -------------------------------------------------------------------------------- /img/related/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/related/4.jpg -------------------------------------------------------------------------------- /img/sponsor/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/sponsor/bg.jpg -------------------------------------------------------------------------------- /img/sponsor/deco.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codrops/TiltHoverEffects/e232cd71190e0f43841a42a851e8049181f7a9b1/img/sponsor/deco.png -------------------------------------------------------------------------------- /img/sponsor/deco2.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 21 | 22 | 23 | 26 | 27 | -------------------------------------------------------------------------------- /img/sponsor/jupiter_logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 6 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 26 | 28 | 30 | 32 | 35 | 37 | 40 | 42 | 44 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tilt Hover Effects | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 23 | 24 | 25 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 | The go-to WordPress theme for many U.S. based agencies 52 | Hover for more 53 |
54 |
Limitless Web Design Experience
55 |
Powering 50000+ High-end Business Websites
56 |
Build a Website. NO Limit. NO Code.
57 | Find out more 58 |
59 |
60 |
61 | 62 | 63 | Build a Website. NO Limit. NO Code. 64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |

Tilt Hover Effects

86 |

Ornamental hovers inspired by the grid on Kikk 2015

87 | 90 |
91 | 92 |
93 | img01 94 |
95 |
96 |

Tanya Bondesta

97 |

Toronto

98 |
99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | img02 107 |
108 |
109 |

Walter Anderson

110 |

Stockholm

111 |
112 | 113 | 114 | 115 |
116 | 117 |
118 |
119 | 120 |
121 | img03 122 |
123 |
124 |
125 |

Helen Portland

126 |

Seattle

127 |
128 | 129 | 130 | 131 |
132 | 133 | 134 |
135 | img04 136 |
137 |
138 |
139 |

Kara Greene

140 |

New York

141 |
142 | 143 | 144 | 145 |
146 | 147 |
148 |
149 | 150 |
151 | img05 152 |
153 |
154 |
155 |

Frank Hausman

156 |

Paris

157 |
158 |
159 | 160 | 161 |
162 | img06 163 |
164 |
165 |
166 |

Peter Dreifuss

167 |

Berlin

168 |
169 |
170 | 171 |
172 |
173 | 174 |
175 | img07 176 |
177 |
178 |
179 |

Chritie Lehmann

180 |

Miami

181 |
182 | 183 | 184 | 185 |
186 | 187 | 188 |
189 | img08 190 |
191 |
192 |
193 |

Charles Wang

194 |

Hong Kong

195 |
196 | 197 | 198 | 199 |
200 | 201 |
202 |
203 | 204 |
205 | img09 206 |
207 |
208 |
209 |

Gary Freeman

210 |

London

211 |
212 | 213 | 214 | 215 |
216 | 217 | 218 |
219 | img10 220 |
221 |
222 |
223 |

Andrea Torchini

224 |

Rome

225 |
226 | 227 | 228 | 229 |
230 | 231 |
232 |
233 | 234 |
235 | img11 236 |
237 |
238 |
239 |

Ben Wade

240 |

Dublin

241 |
242 | 243 | 244 | 245 |
246 | 247 | 248 |
249 | img12 250 |
251 |
252 |
253 |

Sam Yu

254 |

Milan

255 |
256 | 257 | 258 | 259 |
260 | 261 |
262 |
263 | 264 |
265 | img13 266 |
267 |
268 |
269 |

Wilma Rex

270 |

Amsterdam

271 |
272 | 273 | 274 | 275 |
276 | 277 | 278 |
279 | img14 280 |
281 |
282 |
283 |

Jenny Bird

284 |

Porto

285 |
286 | 287 | 288 | 289 |
290 | 291 |
292 |
293 | 294 |
295 | img15 296 |
297 |
298 |
299 |

Tanya Bondesta

300 |

Toronto

301 |
302 | 303 | 304 | 305 |
306 | 307 | 308 |
309 | img02 310 |
311 |
312 |
313 |

Walter Anderson

314 |

Stockholm

315 |
316 | 317 | 318 | 319 |
320 | 321 |
322 | 323 |
324 |

If you enjoyed this demo you might also like:

325 | 326 | 327 |

Hover Effect Ideas

328 | 329 | 330 | 331 |

Image Tilt Effect

332 | 333 | 334 | 335 |

Media Pop Up Effect

336 | 337 | 338 | 339 |

Segment Effect

340 | 341 |
342 |
343 | 344 | 345 | 346 | 550 | 551 | -------------------------------------------------------------------------------- /index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tilt Hover Effects | Demo 2 | Codrops 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 | 23 | 24 | 25 | 38 |
39 |
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
50 | 51 | The go-to WordPress theme for many U.S. based agencies 52 | Hover for more 53 |
54 |
Limitless Web Design Experience
55 |
Powering 50000+ High-end Business Websites
56 |
Build a Website. NO Limit. NO Code.
57 | Find out more 58 |
59 |
60 |
61 | 62 | 63 | Build a Website. NO Limit. NO Code. 64 | 65 |
66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
85 |

Tilt Hover Effects

86 |

Ornamental hovers inspired by the grid on Kikk 2015

87 | 90 |
91 | 92 |
93 | img01 94 |
95 |
96 |

Tanya Bondesta

97 |

Toronto

98 |
99 | 100 | 101 | 102 |
103 | 104 | 105 |
106 | img02 107 |
108 |
109 |

Walter Anderson

110 |

Stockholm

111 |
112 | 113 | 114 | 115 |
116 | 117 |
118 |
119 | 120 |
121 | img03 122 |
123 |
124 |
125 |

Helen Portland

126 |

Seattle

127 |
128 | 129 | 130 | 131 |
132 | 133 | 134 |
135 | img04 136 |
137 |
138 |
139 |

Kara Greene

140 |

New York

141 |
142 | 143 | 144 | 145 |
146 | 147 |
148 |
149 | 150 |
151 | img05 152 |
153 |
154 |
155 |

Frank Hausman

156 |

Paris

157 |
158 |
159 | 160 | 161 |
162 | img06 163 |
164 |
165 |
166 |

Peter Dreifuss

167 |

Berlin

168 |
169 |
170 | 171 |
172 |
173 | 174 |
175 | img07 176 |
177 |
178 |
179 |

Chritie Lehmann

180 |

Miami

181 |
182 | 183 | 184 | 185 |
186 | 187 | 188 |
189 | img08 190 |
191 |
192 |
193 |

Charles Wang

194 |

Hong Kong

195 |
196 | 197 | 198 | 199 |
200 | 201 |
202 |
203 | 204 |
205 | img09 206 |
207 |
208 |
209 |

Gary Freeman

210 |

London

211 |
212 | 213 | 214 | 215 |
216 | 217 | 218 |
219 | img10 220 |
221 |
222 |
223 |

Andrea Torchini

224 |

Rome

225 |
226 | 227 | 228 | 229 |
230 | 231 |
232 |
233 | 234 |
235 | img11 236 |
237 |
238 |
239 |

Ben Wade

240 |

Dublin

241 |
242 | 243 | 244 | 245 |
246 | 247 | 248 |
249 | img12 250 |
251 |
252 |
253 |

Sam Yu

254 |

Milan

255 |
256 | 257 | 258 | 259 |
260 | 261 |
262 |
263 | 264 |
265 | img13 266 |
267 |
268 |
269 |

Wilma Rex

270 |

Amsterdam

271 |
272 | 273 | 274 | 275 |
276 | 277 | 278 |
279 | img14 280 |
281 |
282 |
283 |

Jenny Bird

284 |

Porto

285 |
286 | 287 | 288 | 289 |
290 | 291 |
292 |
293 | 294 |
295 | img15 296 |
297 |
298 |
299 |

Tanya Bondesta

300 |

Toronto

301 |
302 | 303 | 304 | 305 |
306 | 307 | 308 |
309 | img02 310 |
311 |
312 |
313 |

Walter Anderson

314 |

Stockholm

315 |
316 | 317 | 318 | 319 |
320 | 321 |
322 | 323 |
324 |

If you enjoyed this demo you might also like:

325 | 326 | 327 |

Hover Effect Ideas

328 | 329 | 330 | 331 |

Image Tilt Effect

332 | 333 | 334 | 335 |

Media Pop Up Effect

336 | 337 | 338 | 339 |

Segment Effect

340 | 341 |
342 |
343 | 344 | 345 | 346 | 550 | 551 | -------------------------------------------------------------------------------- /js/anime.min.js: -------------------------------------------------------------------------------- 1 | (function(u,r){"function"===typeof define&&define.amd?define([],r):"object"===typeof module&&module.exports?module.exports=r():u.anime=r()})(this,function(){var u={duration:1E3,delay:0,loop:!1,autoplay:!0,direction:"normal",easing:"easeOutElastic",elasticity:400,round:!1,begin:void 0,update:void 0,complete:void 0},r="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),y,f={arr:function(a){return Array.isArray(a)},obj:function(a){return-1< 2 | Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||f.svg(a)},num:function(a){return!isNaN(parseInt(a))},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},nul:function(a){return"null"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)}, 3 | col:function(a){return f.hex(a)||f.rgb(a)||f.hsl(a)}},D=function(){var a={},b={Sine:function(a){return 1-Math.cos(a*Math.PI/2)},Circ:function(a){return 1-Math.sqrt(1-a*a)},Elastic:function(a,b){if(0===a||1===a)return a;var d=1-Math.min(b,998)/1E3,g=a/1-1;return-(Math.pow(2,10*g)*Math.sin(2*(g-d/(2*Math.PI)*Math.asin(1))*Math.PI/d))},Back:function(a){return a*a*(3*a-2)},Bounce:function(a){for(var b,d=4;a<((b=Math.pow(2,--d))-1)/11;);return 1/Math.pow(4,3-d)-7.5625*Math.pow((3*b-2)/22-a,2)}};["Quad", 4 | "Cubic","Quart","Quint","Expo"].forEach(function(a,e){b[a]=function(a){return Math.pow(a,e+2)}});Object.keys(b).forEach(function(c){var e=b[c];a["easeIn"+c]=e;a["easeOut"+c]=function(a,b){return 1-e(1-a,b)};a["easeInOut"+c]=function(a,b){return.5>a?e(2*a,b)/2:1-e(-2*a+2,b)/2};a["easeOutIn"+c]=function(a,b){return.5>a?(1-e(1-2*a,b))/2:(e(2*a-1,b)+1)/2}});a.linear=function(a){return a};return a}(),z=function(a){return f.str(a)?a:a+""},E=function(a){return a.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase()}, 5 | F=function(a){if(f.col(a))return!1;try{return document.querySelectorAll(a)}catch(b){return!1}},A=function(a){return a.reduce(function(a,c){return a.concat(f.arr(c)?A(c):c)},[])},t=function(a){if(f.arr(a))return a;f.str(a)&&(a=F(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]},G=function(a,b){return a.some(function(a){return a===b})},R=function(a,b){var c={};a.forEach(function(a){var d=JSON.stringify(b.map(function(b){return a[b]}));c[d]=c[d]||[];c[d].push(a)}); 6 | return Object.keys(c).map(function(a){return c[a]})},H=function(a){return a.filter(function(a,c,e){return e.indexOf(a)===c})},B=function(a){var b={},c;for(c in a)b[c]=a[c];return b},v=function(a,b){for(var c in b)a[c]=f.und(a[c])?b[c]:a[c];return a},S=function(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,c,m){return b+b+c+c+m+m});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var c=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+c+","+b+")"}, 7 | T=function(a){a=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);var b=parseInt(a[1])/360,c=parseInt(a[2])/100,e=parseInt(a[3])/100;a=function(a,b,c){0>c&&(c+=1);1c?b:c<2/3?a+(b-a)*(2/3-c)*6:a};if(0==c)c=e=b=e;else var d=.5>e?e*(1+c):e+c-e*c,g=2*e-d,c=a(g,d,b+1/3),e=a(g,d,b),b=a(g,d,b-1/3);return"rgb("+255*c+","+255*e+","+255*b+")"},p=function(a){return/([\+\-]?[0-9|auto\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg)?/.exec(a)[2]},I=function(a,b,c){return p(b)? 8 | b:-1=d.delay&&(d.begin(b),d.begin=void 0);c.current>=b.duration&&(d.loop?(c.start=a,"alternate"===d.direction&&C(b,!0),f.num(d.loop)&&d.loop--):(b.ended=!0,b.pause(),d.complete&&d.complete(b)),c.last=0)};b.seek=function(a){P(b,a/100*b.duration)};b.pause=function(){ba(b);var a=n.indexOf(b);-1 div'); 109 | this._initEvents(); 110 | }; 111 | 112 | /** 113 | * Init/Bind events. 114 | */ 115 | TiltFx.prototype._initEvents = function() { 116 | var self = this; 117 | 118 | this.mouseenterFn = function() { 119 | for(var key in self.DOM.animatable) { 120 | anime.remove(self.DOM.animatable[key]); 121 | } 122 | }; 123 | 124 | this.mousemoveFn = function(ev) { 125 | requestAnimationFrame(function() { self._layout(ev); }); 126 | }; 127 | 128 | this.mouseleaveFn = function(ev) { 129 | requestAnimationFrame(function() { 130 | for(var key in self.DOM.animatable) { 131 | if( self.options.movement[key] == undefined ) {continue;} 132 | anime({ 133 | targets: self.DOM.animatable[key], 134 | duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1, 135 | easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear', 136 | elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null, 137 | scaleX: 1, 138 | scaleY: 1, 139 | scaleZ: 1, 140 | translateX: 0, 141 | translateY: 0, 142 | translateZ: 0, 143 | rotateX: 0, 144 | rotateY: 0, 145 | rotateZ: 0 146 | }); 147 | } 148 | }); 149 | }; 150 | 151 | this.DOM.el.addEventListener('mousemove', this.mousemoveFn); 152 | this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); 153 | this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); 154 | }; 155 | 156 | TiltFx.prototype._layout = function(ev) { 157 | // Mouse position relative to the document. 158 | var mousepos = getMousePos(ev), 159 | // Document scrolls. 160 | docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop}, 161 | bounds = this.DOM.el.getBoundingClientRect(), 162 | // Mouse position relative to the main element (this.DOM.el). 163 | relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top }; 164 | 165 | // Movement settings for the animatable elements. 166 | for(var key in this.DOM.animatable) { 167 | if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) { 168 | continue; 169 | } 170 | var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0}, 171 | r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0}, 172 | setRange = function (obj) { 173 | for(var k in obj) { 174 | if( obj[k] == undefined ) { 175 | obj[k] = [0,0]; 176 | } 177 | else if( typeof obj[k] === 'number' ) { 178 | obj[k] = [-1*obj[k],obj[k]]; 179 | } 180 | } 181 | }; 182 | 183 | setRange(t); 184 | setRange(r); 185 | 186 | var transforms = { 187 | translation : { 188 | x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0], 189 | y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0], 190 | z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0], 191 | }, 192 | rotation : { 193 | x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0], 194 | y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0], 195 | z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0] 196 | } 197 | }; 198 | 199 | this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)'; 200 | } 201 | }; 202 | 203 | window.TiltFx = TiltFx; 204 | 205 | })(window); --------------------------------------------------------------------------------