├── Assets ├── super-mario.psd ├── super-mario-3d.jpg ├── supermario3d-rendered.jpg ├── supermario3d-rendered.psd └── Retro_Mario_in_3D_flavor_by_cezkid.gif ├── README.md ├── mario.less ├── css4d.less ├── css4d.css ├── mario.css └── index.html /Assets/super-mario.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cordobo/pure-css-super-mario/HEAD/Assets/super-mario.psd -------------------------------------------------------------------------------- /Assets/super-mario-3d.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cordobo/pure-css-super-mario/HEAD/Assets/super-mario-3d.jpg -------------------------------------------------------------------------------- /Assets/supermario3d-rendered.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cordobo/pure-css-super-mario/HEAD/Assets/supermario3d-rendered.jpg -------------------------------------------------------------------------------- /Assets/supermario3d-rendered.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cordobo/pure-css-super-mario/HEAD/Assets/supermario3d-rendered.psd -------------------------------------------------------------------------------- /Assets/Retro_Mario_in_3D_flavor_by_cezkid.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Cordobo/pure-css-super-mario/HEAD/Assets/Retro_Mario_in_3D_flavor_by_cezkid.gif -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Pure CSS Super Mario 2 | ==================== 3 | 4 | This is the transferred source of a little sideproject I did in 2010. I initially did this without any CSS preprocessor and eventually updated it to LESS in 2013. 5 | 6 | 7 | ## Demo 8 | 9 | + [Super Mario in 3D](http://cordobo.com/wp-content/uploads/pure-css-animated-3d-super-mario/) - CSS only (beta) 10 | 11 | 12 | ## Read more 13 | 14 | + [Pure CSS animated 3D Super Mario Icon](http://cordobo.com/1662-pure-css-animated-3d-super-mario-icon/) 15 | 16 | 17 | ## About 18 | 19 | My name is Andreas Jacob, I'm a Frontend-Developer and Webdesigner from Mannheim, Germany. You can follow me on twitter here: [@cordobo](http://twitter.com/cordobo) or contact me for freelance work here: [http://cordobo.com](http://cordobo.com) -------------------------------------------------------------------------------- /mario.less: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------------------------ 2 | [CSS3 Stylesheet] 3 | 4 | Project: A Pure CSS3 animated 3D Super Mario Retro Icon without images 5 | Last change: 23. July 2014 6 | Designed by: Andreas Jacob, http://cordobo.com/ 7 | Supported Browsers: Safari 5+, Google Chrome 14+ 8 | -------------------------------------------------------------------*/ 9 | 10 | /* 11 | 12 | A Pure CSS3 animated 3D Super Mario Retro Icon without images 13 | Built on top of the "CSS 4D Framework" by Andreas Jacob 14 | 15 | This is an ALPHA 16 | Be aware of the inline-styles from hell and keep in mind this code is not in compliance with any CSS styleguide while in ALPHA 17 | 18 | */ 19 | 20 | 21 | body { 22 | background-color: #3377D3; 23 | color: #fff; 24 | font: 100.1%/1.5 "Gill Sans MT", Calibri, sans-serif; 25 | font-weight: 300; 26 | margin: 0; 27 | padding: 0 0 100px; 28 | } 29 | 30 | h1 { 31 | color: #fff; 32 | font-size: 4em; 33 | font-style: normal; 34 | line-height: 1.1; 35 | margin: 80px 0 0; 36 | } 37 | 38 | h2 { 39 | color: rgba(255,255,255,0.6); 40 | font-size: 1.5em; 41 | line-height: 1.5; 42 | font-style: normal; 43 | } 44 | 45 | span.amp { 46 | font-family: "Palatino Linotype", Palatino, Georgia, serif; 47 | font-size: 1.1em; 48 | font-style: italic; 49 | } 50 | 51 | sup, 52 | small { 53 | font-size: 0.8em; 54 | font-weight: 600; 55 | text-transform: uppercase; 56 | } 57 | 58 | a { 59 | text-decoration: none; 60 | 61 | &:link, 62 | &:visited { 63 | border-bottom: 1px solid rgba(255,255,255,0.3); 64 | color: #eee; 65 | 66 | #note & { 67 | color: #969BA2; 68 | border-bottom: 1px solid #ddd; 69 | } 70 | 71 | } 72 | 73 | &:focus, 74 | &:hover, 75 | &:active { 76 | 77 | border-bottom: 1px solid #fff; 78 | color: #fff; 79 | 80 | #note & { 81 | border-bottom: 1px solid #aaa; 82 | color: #FE3000; 83 | } 84 | 85 | h2 & { 86 | color: #FE3000; 87 | } 88 | 89 | } 90 | } 91 | 92 | header, 93 | article, 94 | footer { 95 | margin: 0 auto; 96 | } 97 | 98 | 99 | #bottom, 100 | #top, 101 | .wrapper { 102 | margin: 0 auto; 103 | } 104 | 105 | #bottom, 106 | #top { 107 | width: 700px; 108 | } 109 | 110 | #content { 111 | padding: 1em; 112 | text-align: center; 113 | } 114 | 115 | #subtext { 116 | line-height: 100px; 117 | margin: 0 auto; 118 | } 119 | 120 | #note { 121 | background-color: #EEF2F5; 122 | bottom: 0; 123 | color: #bbb; 124 | height: 80px; 125 | left: 0; 126 | position: fixed; 127 | width: 100%; 128 | 129 | .container { 130 | margin: 0 auto; 131 | padding: 28px 0; 132 | width: 700px; 133 | } 134 | 135 | } 136 | 137 | #note div.read { 138 | float: left; 139 | } 140 | 141 | #note .right { 142 | float: right; 143 | } 144 | 145 | 146 | @import "css4d.less"; -------------------------------------------------------------------------------- /css4d.less: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------------------------ 2 | [CSS3 Stylesheet] 3 | 4 | Project: CSS 4D - CSS Animation Core 5 | Last change: 23. July 2014 6 | Designed by: Andreas Jacob, http://cordobo.com/ 7 | Supported Browsers: Safari 5+, Google Chrome 14+ 8 | -------------------------------------------------------------------*/ 9 | 10 | /* 11 | 12 | This is an ALPHA 13 | Be aware of the inline-styles from hell and keep in mind this code is not in compliance with any CSS styleguide while in ALPHA 14 | 15 | */ 16 | 17 | 18 | 19 | .wrapper { 20 | height: 224px; 21 | padding: 30px; 22 | position: relative; 23 | width: 224px; 24 | } 25 | 26 | .wrapper:hover { 27 | opacity: 0.6; 28 | 29 | -moz-perspective: 200px; 30 | -moz-perspective-origin: 100px 100px; 31 | -moz-transition: all 1s ease-in-out; 32 | -moz-transform-style: preserve-3d; 33 | 34 | -webkit-perspective: 200; 35 | -webkit-transition: all 1s ease-in-out; 36 | -webkit-transform-style: preserve-3d; 37 | 38 | /* 39 | perspective: 200; 40 | perspective-origin: 150 150; 41 | transition: all 1s ease-in-out; 42 | transform-style: preserve-3d; 43 | */ 44 | 45 | } 46 | 47 | .wrapper:hover div > div { 48 | border: 1px solid #ddd; 49 | } 50 | 51 | .wrapper p { 52 | margin: auto 0; 53 | } 54 | 55 | #parent { 56 | height: 224px; 57 | margin: 0; 58 | width: 224px; 59 | } 60 | 61 | #mario-retro-icon, 62 | #mario-retro-icon div { 63 | position: absolute; 64 | } 65 | 66 | 67 | #mario-retro-icon { 68 | height: 224px; 69 | width: 224px; 70 | 71 | -moz-animation: spin 6s infinite linear; 72 | -moz-transform-origin: (50% 50% 0); 73 | -moz-backface-visibility: visible; 74 | -moz-transform-style: preserve-3d; 75 | 76 | -webkit-animation: spin 6s infinite linear; 77 | -webkit-transform-origin: (50% 50% 0); 78 | -webkit-backface-visibility: visible; 79 | -webkit-transform-style: preserve-3d; 80 | 81 | animation: spin 6s infinite linear; 82 | transform-origin: (50% 50% 0); 83 | backface-visibility: visible; 84 | transform-style: preserve-3d; 85 | } 86 | 87 | #mario-retro-icon:hover { 88 | -moz-animation: hoverSpin 6s infinite linear; 89 | -webkit-animation: hoverSpin 6s infinite linear; 90 | animation: hoverSpin 6s infinite linear; 91 | } 92 | 93 | #mario-retro-icon div { 94 | -moz-transform-style: preserve-3d; 95 | } 96 | 97 | 98 | @-moz-keyframes spin { 99 | from { -moz-transform: rotateY(0); } 100 | to { -moz-transform: rotateY(360deg); } 101 | } 102 | 103 | @-webkit-keyframes spin { 104 | from { -webkit-transform: rotateY(0); } 105 | to { -webkit-transform: rotateY(360deg); } 106 | } 107 | 108 | @-ms-keyframes spin { 109 | from { -ms-transform: rotateY(0); } 110 | to { -ms-transform: rotateY(360deg); } 111 | } 112 | 113 | @keyframes spin { 114 | from { transform: rotateY(0); } 115 | to { transform: rotateY(360deg);} 116 | } 117 | 118 | 119 | @-moz-keyframes hoverSpin { 120 | from { -moz-transform: rotateX(0) rotateY(0) rotateZ(0); } 121 | to { -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } 122 | } 123 | 124 | @-webkit-keyframes hoverSpin { 125 | from { -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); } 126 | to { -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg); } 127 | } 128 | 129 | @-ms-keyframes hoverSpin { 130 | from { -ms-transform: rotateZ(0); } 131 | to { -ms-transform: rotateZ(360deg); } 132 | } 133 | 134 | @keyframes hoverSpin { 135 | from { transform: rotateZ(0); } 136 | to { transform: rotateZ(360deg);} 137 | } 138 | 139 | 140 | /* 141 | @-moz-keyframes hoverSpin, 142 | @-webkit-keyframes hoverSpin, 143 | @-ms-keyframes hoverSpin, 144 | @keyframes hoverSpin { 145 | from { 146 | -moz-transform: rotateZ(0); 147 | -webkit-transform: rotateZ(0); 148 | -ms-transform: rotateZ(0); 149 | } 150 | to { 151 | -moz-transform: rotateZ(360deg); 152 | -webkit-transform: rotateZ(360deg); 153 | -ms-transform: rotateZ(360deg); 154 | } 155 | } 156 | */ 157 | 158 | 159 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 160 | /* 161 | 162 | CSS 4D Framework by Andreas Jacob 163 | Author URL: http://cordobo.com/ 164 | 165 | V 0.3 (Alpha) 166 | 07/23/2014 167 | 168 | 169 | A small CSS framework to create 3D animations with CSS 170 | 171 | */ 172 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 173 | 174 | // Repetitions 175 | @iterations: 15; 176 | 177 | // Size used for FONTS and 178 | @baseSize: 14px; 179 | 180 | 181 | 182 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 183 | /* 184 | * The place where the magic starts 185 | */ 186 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 187 | 188 | @b: @baseSize; 189 | @i: @iterations; 190 | // @c: class name prefix 191 | // @m: multiplier - has no value 192 | 193 | // loopSelector 194 | .ls (h) { 195 | height: @b * @m; 196 | } 197 | 198 | .ls (l) { 199 | left: @b * @m; 200 | } 201 | 202 | .ls (t) { 203 | top: @b * @m; 204 | } 205 | 206 | .ls (w) { 207 | width: @b * @m; 208 | } 209 | 210 | .ls (tx) { 211 | -moz-transform: translateX(@b * @m); 212 | -webkit-transform: translateX(@b * @m); 213 | transform: translateX(@b * @m); 214 | } 215 | 216 | .ls (ty) { 217 | -moz-transform: translateY(@b * @m); 218 | -webkit-transform: translateY(@b * @m); 219 | transform: translateY(@b * @m); 220 | } 221 | 222 | .ls (tz) { 223 | -moz-transform: translateZ(@b * @m); 224 | -webkit-transform: translateZ(@b * @m); 225 | transform: translateZ(@b * @m); 226 | } 227 | 228 | 229 | /* This little sucker is the LOOP, culprit of all generated classes */ 230 | .loop (@c) { 231 | // helper class, will never show up in resulting css 232 | // will be called as long as @m is > -(@i + 1 ) 233 | .loopHelper (@m) when (@m > -(@i + 1)) { 234 | // create the css selector 235 | (~".@{c}@{m}") { 236 | .ls (@c); 237 | } 238 | // next iteration 239 | .loopHelper (@m - 1); 240 | } 241 | // end the loop when @m is > -(@i + 1 ) 242 | .loopHelper (@i) { } 243 | // "call" the loop with the initial value of @i 244 | .loopHelper (@i); 245 | } 246 | 247 | 248 | /* Height = h */ 249 | .loop (h); 250 | /* Left = l */ 251 | .loop (l); 252 | /* top = t */ 253 | .loop (t); 254 | /* Width = w */ 255 | .loop (w); 256 | /* Translate X */ 257 | .loop (tx); 258 | /* Translate Y */ 259 | .loop (ty); 260 | /* Translate Z */ 261 | .loop (tz); 262 | 263 | 264 | .rot0 { -moz-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 265 | .rot90 { -moz-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } 266 | .rot-90 { -moz-transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); } 267 | .rot180 { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 268 | 269 | 270 | /* Orange, Skin color, Green, DEBUG (yellow, pink) */ 271 | .o { background-color: #fe3000; } 272 | .s { background-color: #feb644; } 273 | .g { background-color: #a48b00; } 274 | .y { background-color: yellow; } /* DEBUG */ 275 | .pink { background-color: pink; } /* DEBUG */ 276 | -------------------------------------------------------------------------------- /css4d.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------------------------ 2 | [CSS3 Stylesheet] 3 | 4 | Project: CSS 4D - CSS Animation Core 5 | Last change: 23. July 2014 6 | Designed by: Andreas Jacob, http://cordobo.com/ 7 | Supported Browsers: Safari 5+, Google Chrome 14+ 8 | -------------------------------------------------------------------*/ 9 | /* 10 | 11 | This is an ALPHA 12 | Be aware of the inline-styles from hell and keep in mind this code is not in compliance with any CSS styleguide while in ALPHA 13 | 14 | */ 15 | .wrapper { 16 | height: 224px; 17 | padding: 30px; 18 | position: relative; 19 | width: 224px; 20 | } 21 | .wrapper:hover { 22 | opacity: 0.6; 23 | -moz-perspective: 200px; 24 | -moz-perspective-origin: 100px 100px; 25 | -moz-transition: all 1s ease-in-out; 26 | -moz-transform-style: preserve-3d; 27 | -webkit-perspective: 200; 28 | -webkit-transition: all 1s ease-in-out; 29 | -webkit-transform-style: preserve-3d; 30 | /* 31 | perspective: 200; 32 | perspective-origin: 150 150; 33 | transition: all 1s ease-in-out; 34 | transform-style: preserve-3d; 35 | */ 36 | 37 | } 38 | .wrapper:hover div > div { 39 | border: 1px solid #ddd; 40 | } 41 | .wrapper p { 42 | margin: auto 0; 43 | } 44 | #parent { 45 | height: 224px; 46 | margin: 0; 47 | width: 224px; 48 | } 49 | #mario-retro-icon, 50 | #mario-retro-icon div { 51 | position: absolute; 52 | } 53 | #mario-retro-icon { 54 | height: 224px; 55 | width: 224px; 56 | -moz-animation: spin 6s infinite linear; 57 | -moz-transform-origin: 50% 50% 0; 58 | -moz-backface-visibility: visible; 59 | -moz-transform-style: preserve-3d; 60 | -webkit-animation: spin 6s infinite linear; 61 | -webkit-transform-origin: 50% 50% 0; 62 | -webkit-backface-visibility: visible; 63 | -webkit-transform-style: preserve-3d; 64 | animation: spin 6s infinite linear; 65 | transform-origin: 50% 50% 0; 66 | backface-visibility: visible; 67 | transform-style: preserve-3d; 68 | } 69 | #mario-retro-icon:hover { 70 | -moz-animation: hoverSpin 6s infinite linear; 71 | -webkit-animation: hoverSpin 6s infinite linear; 72 | animation: hoverSpin 6s infinite linear; 73 | } 74 | #mario-retro-icon div { 75 | -moz-transform-style: preserve-3d; 76 | } 77 | @-moz-keyframes spin { 78 | from { 79 | -moz-transform: rotateY(0); 80 | } 81 | to { 82 | -moz-transform: rotateY(360deg); 83 | } 84 | } 85 | @-webkit-keyframes spin { 86 | from { 87 | -webkit-transform: rotateY(0); 88 | } 89 | to { 90 | -webkit-transform: rotateY(360deg); 91 | } 92 | } 93 | @-ms-keyframes spin { 94 | from { 95 | -ms-transform: rotateY(0); 96 | } 97 | to { 98 | -ms-transform: rotateY(360deg); 99 | } 100 | } 101 | @keyframes spin { 102 | from { 103 | transform: rotateY(0); 104 | } 105 | to { 106 | transform: rotateY(360deg); 107 | } 108 | } 109 | @-moz-keyframes hoverSpin { 110 | from { 111 | -moz-transform: rotateX(0) rotateY(0) rotateZ(0); 112 | } 113 | to { 114 | -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); 115 | } 116 | } 117 | @-webkit-keyframes hoverSpin { 118 | from { 119 | -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); 120 | } 121 | to { 122 | -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg); 123 | } 124 | } 125 | @-ms-keyframes hoverSpin { 126 | from { 127 | -ms-transform: rotateZ(0); 128 | } 129 | to { 130 | -ms-transform: rotateZ(360deg); 131 | } 132 | } 133 | @keyframes hoverSpin { 134 | from { 135 | transform: rotateZ(0); 136 | } 137 | to { 138 | transform: rotateZ(360deg); 139 | } 140 | } 141 | /* 142 | @-moz-keyframes hoverSpin, 143 | @-webkit-keyframes hoverSpin, 144 | @-ms-keyframes hoverSpin, 145 | @keyframes hoverSpin { 146 | from { 147 | -moz-transform: rotateZ(0); 148 | -webkit-transform: rotateZ(0); 149 | -ms-transform: rotateZ(0); 150 | } 151 | to { 152 | -moz-transform: rotateZ(360deg); 153 | -webkit-transform: rotateZ(360deg); 154 | -ms-transform: rotateZ(360deg); 155 | } 156 | } 157 | */ 158 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 159 | /* 160 | 161 | CSS 4D Framework by Andreas Jacob 162 | Author URL: http://cordobo.com/ 163 | 164 | V 0.3 (Alpha) 165 | 07/23/2014 166 | 167 | 168 | A small CSS framework to create 3D animations with CSS 169 | 170 | */ 171 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 172 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 173 | /* 174 | * The place where the magic starts 175 | */ 176 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 177 | /* This little sucker is the LOOP, culprit of all generated classes */ 178 | /* Height = h */ 179 | .h15 { 180 | height: 210px; 181 | } 182 | .h14 { 183 | height: 196px; 184 | } 185 | .h13 { 186 | height: 182px; 187 | } 188 | .h12 { 189 | height: 168px; 190 | } 191 | .h11 { 192 | height: 154px; 193 | } 194 | .h10 { 195 | height: 140px; 196 | } 197 | .h9 { 198 | height: 126px; 199 | } 200 | .h8 { 201 | height: 112px; 202 | } 203 | .h7 { 204 | height: 98px; 205 | } 206 | .h6 { 207 | height: 84px; 208 | } 209 | .h5 { 210 | height: 70px; 211 | } 212 | .h4 { 213 | height: 56px; 214 | } 215 | .h3 { 216 | height: 42px; 217 | } 218 | .h2 { 219 | height: 28px; 220 | } 221 | .h1 { 222 | height: 14px; 223 | } 224 | .h0 { 225 | height: 0px; 226 | } 227 | .h-1 { 228 | height: -14px; 229 | } 230 | .h-2 { 231 | height: -28px; 232 | } 233 | .h-3 { 234 | height: -42px; 235 | } 236 | .h-4 { 237 | height: -56px; 238 | } 239 | .h-5 { 240 | height: -70px; 241 | } 242 | .h-6 { 243 | height: -84px; 244 | } 245 | .h-7 { 246 | height: -98px; 247 | } 248 | .h-8 { 249 | height: -112px; 250 | } 251 | .h-9 { 252 | height: -126px; 253 | } 254 | .h-10 { 255 | height: -140px; 256 | } 257 | .h-11 { 258 | height: -154px; 259 | } 260 | .h-12 { 261 | height: -168px; 262 | } 263 | .h-13 { 264 | height: -182px; 265 | } 266 | .h-14 { 267 | height: -196px; 268 | } 269 | .h-15 { 270 | height: -210px; 271 | } 272 | /* Left = l */ 273 | .l15 { 274 | left: 210px; 275 | } 276 | .l14 { 277 | left: 196px; 278 | } 279 | .l13 { 280 | left: 182px; 281 | } 282 | .l12 { 283 | left: 168px; 284 | } 285 | .l11 { 286 | left: 154px; 287 | } 288 | .l10 { 289 | left: 140px; 290 | } 291 | .l9 { 292 | left: 126px; 293 | } 294 | .l8 { 295 | left: 112px; 296 | } 297 | .l7 { 298 | left: 98px; 299 | } 300 | .l6 { 301 | left: 84px; 302 | } 303 | .l5 { 304 | left: 70px; 305 | } 306 | .l4 { 307 | left: 56px; 308 | } 309 | .l3 { 310 | left: 42px; 311 | } 312 | .l2 { 313 | left: 28px; 314 | } 315 | .l1 { 316 | left: 14px; 317 | } 318 | .l0 { 319 | left: 0px; 320 | } 321 | .l-1 { 322 | left: -14px; 323 | } 324 | .l-2 { 325 | left: -28px; 326 | } 327 | .l-3 { 328 | left: -42px; 329 | } 330 | .l-4 { 331 | left: -56px; 332 | } 333 | .l-5 { 334 | left: -70px; 335 | } 336 | .l-6 { 337 | left: -84px; 338 | } 339 | .l-7 { 340 | left: -98px; 341 | } 342 | .l-8 { 343 | left: -112px; 344 | } 345 | .l-9 { 346 | left: -126px; 347 | } 348 | .l-10 { 349 | left: -140px; 350 | } 351 | .l-11 { 352 | left: -154px; 353 | } 354 | .l-12 { 355 | left: -168px; 356 | } 357 | .l-13 { 358 | left: -182px; 359 | } 360 | .l-14 { 361 | left: -196px; 362 | } 363 | .l-15 { 364 | left: -210px; 365 | } 366 | /* top = t */ 367 | .t15 { 368 | top: 210px; 369 | } 370 | .t14 { 371 | top: 196px; 372 | } 373 | .t13 { 374 | top: 182px; 375 | } 376 | .t12 { 377 | top: 168px; 378 | } 379 | .t11 { 380 | top: 154px; 381 | } 382 | .t10 { 383 | top: 140px; 384 | } 385 | .t9 { 386 | top: 126px; 387 | } 388 | .t8 { 389 | top: 112px; 390 | } 391 | .t7 { 392 | top: 98px; 393 | } 394 | .t6 { 395 | top: 84px; 396 | } 397 | .t5 { 398 | top: 70px; 399 | } 400 | .t4 { 401 | top: 56px; 402 | } 403 | .t3 { 404 | top: 42px; 405 | } 406 | .t2 { 407 | top: 28px; 408 | } 409 | .t1 { 410 | top: 14px; 411 | } 412 | .t0 { 413 | top: 0px; 414 | } 415 | .t-1 { 416 | top: -14px; 417 | } 418 | .t-2 { 419 | top: -28px; 420 | } 421 | .t-3 { 422 | top: -42px; 423 | } 424 | .t-4 { 425 | top: -56px; 426 | } 427 | .t-5 { 428 | top: -70px; 429 | } 430 | .t-6 { 431 | top: -84px; 432 | } 433 | .t-7 { 434 | top: -98px; 435 | } 436 | .t-8 { 437 | top: -112px; 438 | } 439 | .t-9 { 440 | top: -126px; 441 | } 442 | .t-10 { 443 | top: -140px; 444 | } 445 | .t-11 { 446 | top: -154px; 447 | } 448 | .t-12 { 449 | top: -168px; 450 | } 451 | .t-13 { 452 | top: -182px; 453 | } 454 | .t-14 { 455 | top: -196px; 456 | } 457 | .t-15 { 458 | top: -210px; 459 | } 460 | /* Width = w */ 461 | .w15 { 462 | width: 210px; 463 | } 464 | .w14 { 465 | width: 196px; 466 | } 467 | .w13 { 468 | width: 182px; 469 | } 470 | .w12 { 471 | width: 168px; 472 | } 473 | .w11 { 474 | width: 154px; 475 | } 476 | .w10 { 477 | width: 140px; 478 | } 479 | .w9 { 480 | width: 126px; 481 | } 482 | .w8 { 483 | width: 112px; 484 | } 485 | .w7 { 486 | width: 98px; 487 | } 488 | .w6 { 489 | width: 84px; 490 | } 491 | .w5 { 492 | width: 70px; 493 | } 494 | .w4 { 495 | width: 56px; 496 | } 497 | .w3 { 498 | width: 42px; 499 | } 500 | .w2 { 501 | width: 28px; 502 | } 503 | .w1 { 504 | width: 14px; 505 | } 506 | .w0 { 507 | width: 0px; 508 | } 509 | .w-1 { 510 | width: -14px; 511 | } 512 | .w-2 { 513 | width: -28px; 514 | } 515 | .w-3 { 516 | width: -42px; 517 | } 518 | .w-4 { 519 | width: -56px; 520 | } 521 | .w-5 { 522 | width: -70px; 523 | } 524 | .w-6 { 525 | width: -84px; 526 | } 527 | .w-7 { 528 | width: -98px; 529 | } 530 | .w-8 { 531 | width: -112px; 532 | } 533 | .w-9 { 534 | width: -126px; 535 | } 536 | .w-10 { 537 | width: -140px; 538 | } 539 | .w-11 { 540 | width: -154px; 541 | } 542 | .w-12 { 543 | width: -168px; 544 | } 545 | .w-13 { 546 | width: -182px; 547 | } 548 | .w-14 { 549 | width: -196px; 550 | } 551 | .w-15 { 552 | width: -210px; 553 | } 554 | /* Translate X */ 555 | .tx15 { 556 | -moz-transform: translateX(210px); 557 | -webkit-transform: translateX(210px); 558 | transform: translateX(210px); 559 | } 560 | .tx14 { 561 | -moz-transform: translateX(196px); 562 | -webkit-transform: translateX(196px); 563 | transform: translateX(196px); 564 | } 565 | .tx13 { 566 | -moz-transform: translateX(182px); 567 | -webkit-transform: translateX(182px); 568 | transform: translateX(182px); 569 | } 570 | .tx12 { 571 | -moz-transform: translateX(168px); 572 | -webkit-transform: translateX(168px); 573 | transform: translateX(168px); 574 | } 575 | .tx11 { 576 | -moz-transform: translateX(154px); 577 | -webkit-transform: translateX(154px); 578 | transform: translateX(154px); 579 | } 580 | .tx10 { 581 | -moz-transform: translateX(140px); 582 | -webkit-transform: translateX(140px); 583 | transform: translateX(140px); 584 | } 585 | .tx9 { 586 | -moz-transform: translateX(126px); 587 | -webkit-transform: translateX(126px); 588 | transform: translateX(126px); 589 | } 590 | .tx8 { 591 | -moz-transform: translateX(112px); 592 | -webkit-transform: translateX(112px); 593 | transform: translateX(112px); 594 | } 595 | .tx7 { 596 | -moz-transform: translateX(98px); 597 | -webkit-transform: translateX(98px); 598 | transform: translateX(98px); 599 | } 600 | .tx6 { 601 | -moz-transform: translateX(84px); 602 | -webkit-transform: translateX(84px); 603 | transform: translateX(84px); 604 | } 605 | .tx5 { 606 | -moz-transform: translateX(70px); 607 | -webkit-transform: translateX(70px); 608 | transform: translateX(70px); 609 | } 610 | .tx4 { 611 | -moz-transform: translateX(56px); 612 | -webkit-transform: translateX(56px); 613 | transform: translateX(56px); 614 | } 615 | .tx3 { 616 | -moz-transform: translateX(42px); 617 | -webkit-transform: translateX(42px); 618 | transform: translateX(42px); 619 | } 620 | .tx2 { 621 | -moz-transform: translateX(28px); 622 | -webkit-transform: translateX(28px); 623 | transform: translateX(28px); 624 | } 625 | .tx1 { 626 | -moz-transform: translateX(14px); 627 | -webkit-transform: translateX(14px); 628 | transform: translateX(14px); 629 | } 630 | .tx0 { 631 | -moz-transform: translateX(0px); 632 | -webkit-transform: translateX(0px); 633 | transform: translateX(0px); 634 | } 635 | .tx-1 { 636 | -moz-transform: translateX(-14px); 637 | -webkit-transform: translateX(-14px); 638 | transform: translateX(-14px); 639 | } 640 | .tx-2 { 641 | -moz-transform: translateX(-28px); 642 | -webkit-transform: translateX(-28px); 643 | transform: translateX(-28px); 644 | } 645 | .tx-3 { 646 | -moz-transform: translateX(-42px); 647 | -webkit-transform: translateX(-42px); 648 | transform: translateX(-42px); 649 | } 650 | .tx-4 { 651 | -moz-transform: translateX(-56px); 652 | -webkit-transform: translateX(-56px); 653 | transform: translateX(-56px); 654 | } 655 | .tx-5 { 656 | -moz-transform: translateX(-70px); 657 | -webkit-transform: translateX(-70px); 658 | transform: translateX(-70px); 659 | } 660 | .tx-6 { 661 | -moz-transform: translateX(-84px); 662 | -webkit-transform: translateX(-84px); 663 | transform: translateX(-84px); 664 | } 665 | .tx-7 { 666 | -moz-transform: translateX(-98px); 667 | -webkit-transform: translateX(-98px); 668 | transform: translateX(-98px); 669 | } 670 | .tx-8 { 671 | -moz-transform: translateX(-112px); 672 | -webkit-transform: translateX(-112px); 673 | transform: translateX(-112px); 674 | } 675 | .tx-9 { 676 | -moz-transform: translateX(-126px); 677 | -webkit-transform: translateX(-126px); 678 | transform: translateX(-126px); 679 | } 680 | .tx-10 { 681 | -moz-transform: translateX(-140px); 682 | -webkit-transform: translateX(-140px); 683 | transform: translateX(-140px); 684 | } 685 | .tx-11 { 686 | -moz-transform: translateX(-154px); 687 | -webkit-transform: translateX(-154px); 688 | transform: translateX(-154px); 689 | } 690 | .tx-12 { 691 | -moz-transform: translateX(-168px); 692 | -webkit-transform: translateX(-168px); 693 | transform: translateX(-168px); 694 | } 695 | .tx-13 { 696 | -moz-transform: translateX(-182px); 697 | -webkit-transform: translateX(-182px); 698 | transform: translateX(-182px); 699 | } 700 | .tx-14 { 701 | -moz-transform: translateX(-196px); 702 | -webkit-transform: translateX(-196px); 703 | transform: translateX(-196px); 704 | } 705 | .tx-15 { 706 | -moz-transform: translateX(-210px); 707 | -webkit-transform: translateX(-210px); 708 | transform: translateX(-210px); 709 | } 710 | /* Translate Y */ 711 | .ty15 { 712 | -moz-transform: translateY(210px); 713 | -webkit-transform: translateY(210px); 714 | transform: translateY(210px); 715 | } 716 | .ty14 { 717 | -moz-transform: translateY(196px); 718 | -webkit-transform: translateY(196px); 719 | transform: translateY(196px); 720 | } 721 | .ty13 { 722 | -moz-transform: translateY(182px); 723 | -webkit-transform: translateY(182px); 724 | transform: translateY(182px); 725 | } 726 | .ty12 { 727 | -moz-transform: translateY(168px); 728 | -webkit-transform: translateY(168px); 729 | transform: translateY(168px); 730 | } 731 | .ty11 { 732 | -moz-transform: translateY(154px); 733 | -webkit-transform: translateY(154px); 734 | transform: translateY(154px); 735 | } 736 | .ty10 { 737 | -moz-transform: translateY(140px); 738 | -webkit-transform: translateY(140px); 739 | transform: translateY(140px); 740 | } 741 | .ty9 { 742 | -moz-transform: translateY(126px); 743 | -webkit-transform: translateY(126px); 744 | transform: translateY(126px); 745 | } 746 | .ty8 { 747 | -moz-transform: translateY(112px); 748 | -webkit-transform: translateY(112px); 749 | transform: translateY(112px); 750 | } 751 | .ty7 { 752 | -moz-transform: translateY(98px); 753 | -webkit-transform: translateY(98px); 754 | transform: translateY(98px); 755 | } 756 | .ty6 { 757 | -moz-transform: translateY(84px); 758 | -webkit-transform: translateY(84px); 759 | transform: translateY(84px); 760 | } 761 | .ty5 { 762 | -moz-transform: translateY(70px); 763 | -webkit-transform: translateY(70px); 764 | transform: translateY(70px); 765 | } 766 | .ty4 { 767 | -moz-transform: translateY(56px); 768 | -webkit-transform: translateY(56px); 769 | transform: translateY(56px); 770 | } 771 | .ty3 { 772 | -moz-transform: translateY(42px); 773 | -webkit-transform: translateY(42px); 774 | transform: translateY(42px); 775 | } 776 | .ty2 { 777 | -moz-transform: translateY(28px); 778 | -webkit-transform: translateY(28px); 779 | transform: translateY(28px); 780 | } 781 | .ty1 { 782 | -moz-transform: translateY(14px); 783 | -webkit-transform: translateY(14px); 784 | transform: translateY(14px); 785 | } 786 | .ty0 { 787 | -moz-transform: translateY(0px); 788 | -webkit-transform: translateY(0px); 789 | transform: translateY(0px); 790 | } 791 | .ty-1 { 792 | -moz-transform: translateY(-14px); 793 | -webkit-transform: translateY(-14px); 794 | transform: translateY(-14px); 795 | } 796 | .ty-2 { 797 | -moz-transform: translateY(-28px); 798 | -webkit-transform: translateY(-28px); 799 | transform: translateY(-28px); 800 | } 801 | .ty-3 { 802 | -moz-transform: translateY(-42px); 803 | -webkit-transform: translateY(-42px); 804 | transform: translateY(-42px); 805 | } 806 | .ty-4 { 807 | -moz-transform: translateY(-56px); 808 | -webkit-transform: translateY(-56px); 809 | transform: translateY(-56px); 810 | } 811 | .ty-5 { 812 | -moz-transform: translateY(-70px); 813 | -webkit-transform: translateY(-70px); 814 | transform: translateY(-70px); 815 | } 816 | .ty-6 { 817 | -moz-transform: translateY(-84px); 818 | -webkit-transform: translateY(-84px); 819 | transform: translateY(-84px); 820 | } 821 | .ty-7 { 822 | -moz-transform: translateY(-98px); 823 | -webkit-transform: translateY(-98px); 824 | transform: translateY(-98px); 825 | } 826 | .ty-8 { 827 | -moz-transform: translateY(-112px); 828 | -webkit-transform: translateY(-112px); 829 | transform: translateY(-112px); 830 | } 831 | .ty-9 { 832 | -moz-transform: translateY(-126px); 833 | -webkit-transform: translateY(-126px); 834 | transform: translateY(-126px); 835 | } 836 | .ty-10 { 837 | -moz-transform: translateY(-140px); 838 | -webkit-transform: translateY(-140px); 839 | transform: translateY(-140px); 840 | } 841 | .ty-11 { 842 | -moz-transform: translateY(-154px); 843 | -webkit-transform: translateY(-154px); 844 | transform: translateY(-154px); 845 | } 846 | .ty-12 { 847 | -moz-transform: translateY(-168px); 848 | -webkit-transform: translateY(-168px); 849 | transform: translateY(-168px); 850 | } 851 | .ty-13 { 852 | -moz-transform: translateY(-182px); 853 | -webkit-transform: translateY(-182px); 854 | transform: translateY(-182px); 855 | } 856 | .ty-14 { 857 | -moz-transform: translateY(-196px); 858 | -webkit-transform: translateY(-196px); 859 | transform: translateY(-196px); 860 | } 861 | .ty-15 { 862 | -moz-transform: translateY(-210px); 863 | -webkit-transform: translateY(-210px); 864 | transform: translateY(-210px); 865 | } 866 | /* Translate Z */ 867 | .tz15 { 868 | -moz-transform: translateZ(210px); 869 | -webkit-transform: translateZ(210px); 870 | transform: translateZ(210px); 871 | } 872 | .tz14 { 873 | -moz-transform: translateZ(196px); 874 | -webkit-transform: translateZ(196px); 875 | transform: translateZ(196px); 876 | } 877 | .tz13 { 878 | -moz-transform: translateZ(182px); 879 | -webkit-transform: translateZ(182px); 880 | transform: translateZ(182px); 881 | } 882 | .tz12 { 883 | -moz-transform: translateZ(168px); 884 | -webkit-transform: translateZ(168px); 885 | transform: translateZ(168px); 886 | } 887 | .tz11 { 888 | -moz-transform: translateZ(154px); 889 | -webkit-transform: translateZ(154px); 890 | transform: translateZ(154px); 891 | } 892 | .tz10 { 893 | -moz-transform: translateZ(140px); 894 | -webkit-transform: translateZ(140px); 895 | transform: translateZ(140px); 896 | } 897 | .tz9 { 898 | -moz-transform: translateZ(126px); 899 | -webkit-transform: translateZ(126px); 900 | transform: translateZ(126px); 901 | } 902 | .tz8 { 903 | -moz-transform: translateZ(112px); 904 | -webkit-transform: translateZ(112px); 905 | transform: translateZ(112px); 906 | } 907 | .tz7 { 908 | -moz-transform: translateZ(98px); 909 | -webkit-transform: translateZ(98px); 910 | transform: translateZ(98px); 911 | } 912 | .tz6 { 913 | -moz-transform: translateZ(84px); 914 | -webkit-transform: translateZ(84px); 915 | transform: translateZ(84px); 916 | } 917 | .tz5 { 918 | -moz-transform: translateZ(70px); 919 | -webkit-transform: translateZ(70px); 920 | transform: translateZ(70px); 921 | } 922 | .tz4 { 923 | -moz-transform: translateZ(56px); 924 | -webkit-transform: translateZ(56px); 925 | transform: translateZ(56px); 926 | } 927 | .tz3 { 928 | -moz-transform: translateZ(42px); 929 | -webkit-transform: translateZ(42px); 930 | transform: translateZ(42px); 931 | } 932 | .tz2 { 933 | -moz-transform: translateZ(28px); 934 | -webkit-transform: translateZ(28px); 935 | transform: translateZ(28px); 936 | } 937 | .tz1 { 938 | -moz-transform: translateZ(14px); 939 | -webkit-transform: translateZ(14px); 940 | transform: translateZ(14px); 941 | } 942 | .tz0 { 943 | -moz-transform: translateZ(0px); 944 | -webkit-transform: translateZ(0px); 945 | transform: translateZ(0px); 946 | } 947 | .tz-1 { 948 | -moz-transform: translateZ(-14px); 949 | -webkit-transform: translateZ(-14px); 950 | transform: translateZ(-14px); 951 | } 952 | .tz-2 { 953 | -moz-transform: translateZ(-28px); 954 | -webkit-transform: translateZ(-28px); 955 | transform: translateZ(-28px); 956 | } 957 | .tz-3 { 958 | -moz-transform: translateZ(-42px); 959 | -webkit-transform: translateZ(-42px); 960 | transform: translateZ(-42px); 961 | } 962 | .tz-4 { 963 | -moz-transform: translateZ(-56px); 964 | -webkit-transform: translateZ(-56px); 965 | transform: translateZ(-56px); 966 | } 967 | .tz-5 { 968 | -moz-transform: translateZ(-70px); 969 | -webkit-transform: translateZ(-70px); 970 | transform: translateZ(-70px); 971 | } 972 | .tz-6 { 973 | -moz-transform: translateZ(-84px); 974 | -webkit-transform: translateZ(-84px); 975 | transform: translateZ(-84px); 976 | } 977 | .tz-7 { 978 | -moz-transform: translateZ(-98px); 979 | -webkit-transform: translateZ(-98px); 980 | transform: translateZ(-98px); 981 | } 982 | .tz-8 { 983 | -moz-transform: translateZ(-112px); 984 | -webkit-transform: translateZ(-112px); 985 | transform: translateZ(-112px); 986 | } 987 | .tz-9 { 988 | -moz-transform: translateZ(-126px); 989 | -webkit-transform: translateZ(-126px); 990 | transform: translateZ(-126px); 991 | } 992 | .tz-10 { 993 | -moz-transform: translateZ(-140px); 994 | -webkit-transform: translateZ(-140px); 995 | transform: translateZ(-140px); 996 | } 997 | .tz-11 { 998 | -moz-transform: translateZ(-154px); 999 | -webkit-transform: translateZ(-154px); 1000 | transform: translateZ(-154px); 1001 | } 1002 | .tz-12 { 1003 | -moz-transform: translateZ(-168px); 1004 | -webkit-transform: translateZ(-168px); 1005 | transform: translateZ(-168px); 1006 | } 1007 | .tz-13 { 1008 | -moz-transform: translateZ(-182px); 1009 | -webkit-transform: translateZ(-182px); 1010 | transform: translateZ(-182px); 1011 | } 1012 | .tz-14 { 1013 | -moz-transform: translateZ(-196px); 1014 | -webkit-transform: translateZ(-196px); 1015 | transform: translateZ(-196px); 1016 | } 1017 | .tz-15 { 1018 | -moz-transform: translateZ(-210px); 1019 | -webkit-transform: translateZ(-210px); 1020 | transform: translateZ(-210px); 1021 | } 1022 | .rot0 { 1023 | -moz-transform: rotateY(0deg); 1024 | -webkit-transform: rotateY(0deg); 1025 | transform: rotateY(0deg); 1026 | } 1027 | .rot90 { 1028 | -moz-transform: rotateY(90deg); 1029 | -webkit-transform: rotateY(90deg); 1030 | transform: rotateY(90deg); 1031 | } 1032 | .rot-90 { 1033 | -moz-transform: rotateY(-90deg); 1034 | -webkit-transform: rotateY(-90deg); 1035 | transform: rotateY(-90deg); 1036 | } 1037 | .rot180 { 1038 | -moz-transform: rotateY(180deg); 1039 | -webkit-transform: rotateY(180deg); 1040 | transform: rotateY(180deg); 1041 | } 1042 | /* Orange, Skin color, Green, DEBUG (yellow, pink) */ 1043 | .o { 1044 | background-color: #fe3000; 1045 | } 1046 | .s { 1047 | background-color: #feb644; 1048 | } 1049 | .g { 1050 | background-color: #a48b00; 1051 | } 1052 | .y { 1053 | background-color: yellow; 1054 | } 1055 | /* DEBUG */ 1056 | .pink { 1057 | background-color: pink; 1058 | } 1059 | /* DEBUG */ 1060 | -------------------------------------------------------------------------------- /mario.css: -------------------------------------------------------------------------------- 1 | /*------------------------------------------------------------------ 2 | [CSS3 Stylesheet] 3 | 4 | Project: A Pure CSS3 animated 3D Super Mario Retro Icon without images 5 | Last change: 23. July 2014 6 | Designed by: Andreas Jacob, http://cordobo.com/ 7 | Supported Browsers: Safari 5+, Google Chrome 14+ 8 | -------------------------------------------------------------------*/ 9 | /* 10 | 11 | A Pure CSS3 animated 3D Super Mario Retro Icon without images 12 | Built on top of the "CSS 4D Framework" by Andreas Jacob 13 | 14 | This is an ALPHA 15 | Be aware of the inline-styles from hell and keep in mind this code is not in compliance with any CSS styleguide while in ALPHA 16 | 17 | */ 18 | body { 19 | background-color: #3377D3; 20 | color: #fff; 21 | font: 100.1%/1.5 "Gill Sans MT", Calibri, sans-serif; 22 | font-weight: 300; 23 | margin: 0; 24 | padding: 0 0 100px; 25 | } 26 | h1 { 27 | color: #fff; 28 | font-size: 4em; 29 | font-style: normal; 30 | line-height: 1.1; 31 | margin: 80px 0 0; 32 | } 33 | h2 { 34 | color: rgba(255, 255, 255, 0.6); 35 | font-size: 1.5em; 36 | line-height: 1.5; 37 | font-style: normal; 38 | } 39 | span.amp { 40 | font-family: "Palatino Linotype", Palatino, Georgia, serif; 41 | font-size: 1.1em; 42 | font-style: italic; 43 | } 44 | sup, 45 | small { 46 | font-size: 0.8em; 47 | font-weight: 600; 48 | text-transform: uppercase; 49 | } 50 | a { 51 | text-decoration: none; 52 | } 53 | a:link, 54 | a:visited { 55 | border-bottom: 1px solid rgba(255, 255, 255, 0.3); 56 | color: #eee; 57 | } 58 | #note a:link, 59 | #note a:visited { 60 | color: #969BA2; 61 | border-bottom: 1px solid #ddd; 62 | } 63 | a:focus, 64 | a:hover, 65 | a:active { 66 | border-bottom: 1px solid #fff; 67 | color: #fff; 68 | } 69 | #note a:focus, 70 | #note a:hover, 71 | #note a:active { 72 | border-bottom: 1px solid #aaa; 73 | color: #FE3000; 74 | } 75 | h2 a:focus, 76 | h2 a:hover, 77 | h2 a:active { 78 | color: #FE3000; 79 | } 80 | header, 81 | article, 82 | footer { 83 | margin: 0 auto; 84 | } 85 | #bottom, 86 | #top, 87 | .wrapper { 88 | margin: 0 auto; 89 | } 90 | #bottom, 91 | #top { 92 | width: 700px; 93 | } 94 | #content { 95 | padding: 1em; 96 | text-align: center; 97 | } 98 | #subtext { 99 | line-height: 100px; 100 | margin: 0 auto; 101 | } 102 | #note { 103 | background-color: #EEF2F5; 104 | bottom: 0; 105 | color: #bbb; 106 | height: 80px; 107 | left: 0; 108 | position: fixed; 109 | width: 100%; 110 | } 111 | #note .container { 112 | margin: 0 auto; 113 | padding: 28px 0; 114 | width: 700px; 115 | } 116 | #note div.read { 117 | float: left; 118 | } 119 | #note .right { 120 | float: right; 121 | } 122 | /*------------------------------------------------------------------ 123 | [CSS3 Stylesheet] 124 | 125 | Project: CSS 4D - CSS Animation Core 126 | Last change: 23. July 2014 127 | Designed by: Andreas Jacob, http://cordobo.com/ 128 | Supported Browsers: Safari 5+, Google Chrome 14+ 129 | -------------------------------------------------------------------*/ 130 | /* 131 | 132 | This is an ALPHA 133 | Be aware of the inline-styles from hell and keep in mind this code is not in compliance with any CSS styleguide while in ALPHA 134 | 135 | */ 136 | .wrapper { 137 | height: 224px; 138 | padding: 30px; 139 | position: relative; 140 | width: 224px; 141 | } 142 | .wrapper:hover { 143 | opacity: 0.6; 144 | -moz-perspective: 200px; 145 | -moz-perspective-origin: 100px 100px; 146 | -moz-transition: all 1s ease-in-out; 147 | -moz-transform-style: preserve-3d; 148 | -webkit-perspective: 200; 149 | -webkit-transition: all 1s ease-in-out; 150 | -webkit-transform-style: preserve-3d; 151 | /* 152 | perspective: 200; 153 | perspective-origin: 150 150; 154 | transition: all 1s ease-in-out; 155 | transform-style: preserve-3d; 156 | */ 157 | 158 | } 159 | .wrapper:hover div > div { 160 | border: 1px solid #ddd; 161 | } 162 | .wrapper p { 163 | margin: auto 0; 164 | } 165 | #parent { 166 | height: 224px; 167 | margin: 0; 168 | width: 224px; 169 | } 170 | #mario-retro-icon, 171 | #mario-retro-icon div { 172 | position: absolute; 173 | } 174 | #mario-retro-icon { 175 | height: 224px; 176 | width: 224px; 177 | -moz-animation: spin 6s infinite linear; 178 | -moz-transform-origin: 50% 50% 0; 179 | -moz-backface-visibility: visible; 180 | -moz-transform-style: preserve-3d; 181 | -webkit-animation: spin 6s infinite linear; 182 | -webkit-transform-origin: 50% 50% 0; 183 | -webkit-backface-visibility: visible; 184 | -webkit-transform-style: preserve-3d; 185 | animation: spin 6s infinite linear; 186 | transform-origin: 50% 50% 0; 187 | backface-visibility: visible; 188 | transform-style: preserve-3d; 189 | } 190 | #mario-retro-icon:hover { 191 | -moz-animation: hoverSpin 6s infinite linear; 192 | -webkit-animation: hoverSpin 6s infinite linear; 193 | animation: hoverSpin 6s infinite linear; 194 | } 195 | #mario-retro-icon div { 196 | -moz-transform-style: preserve-3d; 197 | } 198 | @-moz-keyframes spin { 199 | from { 200 | -moz-transform: rotateY(0); 201 | } 202 | to { 203 | -moz-transform: rotateY(360deg); 204 | } 205 | } 206 | @-webkit-keyframes spin { 207 | from { 208 | -webkit-transform: rotateY(0); 209 | } 210 | to { 211 | -webkit-transform: rotateY(360deg); 212 | } 213 | } 214 | @-ms-keyframes spin { 215 | from { 216 | -ms-transform: rotateY(0); 217 | } 218 | to { 219 | -ms-transform: rotateY(360deg); 220 | } 221 | } 222 | @keyframes spin { 223 | from { 224 | transform: rotateY(0); 225 | } 226 | to { 227 | transform: rotateY(360deg); 228 | } 229 | } 230 | @-moz-keyframes hoverSpin { 231 | from { 232 | -moz-transform: rotateX(0) rotateY(0) rotateZ(0); 233 | } 234 | to { 235 | -moz-transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); 236 | } 237 | } 238 | @-webkit-keyframes hoverSpin { 239 | from { 240 | -webkit-transform: rotateX(0) rotateY(0) rotateZ(0); 241 | } 242 | to { 243 | -webkit-transform: rotateX(360deg) rotateY(360deg) rotateZ(720deg); 244 | } 245 | } 246 | @-ms-keyframes hoverSpin { 247 | from { 248 | -ms-transform: rotateZ(0); 249 | } 250 | to { 251 | -ms-transform: rotateZ(360deg); 252 | } 253 | } 254 | @keyframes hoverSpin { 255 | from { 256 | transform: rotateZ(0); 257 | } 258 | to { 259 | transform: rotateZ(360deg); 260 | } 261 | } 262 | /* 263 | @-moz-keyframes hoverSpin, 264 | @-webkit-keyframes hoverSpin, 265 | @-ms-keyframes hoverSpin, 266 | @keyframes hoverSpin { 267 | from { 268 | -moz-transform: rotateZ(0); 269 | -webkit-transform: rotateZ(0); 270 | -ms-transform: rotateZ(0); 271 | } 272 | to { 273 | -moz-transform: rotateZ(360deg); 274 | -webkit-transform: rotateZ(360deg); 275 | -ms-transform: rotateZ(360deg); 276 | } 277 | } 278 | */ 279 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 280 | /* 281 | 282 | CSS 4D Framework by Andreas Jacob 283 | Author URL: http://cordobo.com/ 284 | 285 | V 0.3 (Alpha) 286 | 07/23/2014 287 | 288 | 289 | A small CSS framework to create 3D animations with CSS 290 | 291 | */ 292 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 293 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 294 | /* 295 | * The place where the magic starts 296 | */ 297 | /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 298 | /* This little sucker is the LOOP, culprit of all generated classes */ 299 | /* Height = h */ 300 | .h15 { 301 | height: 210px; 302 | } 303 | .h14 { 304 | height: 196px; 305 | } 306 | .h13 { 307 | height: 182px; 308 | } 309 | .h12 { 310 | height: 168px; 311 | } 312 | .h11 { 313 | height: 154px; 314 | } 315 | .h10 { 316 | height: 140px; 317 | } 318 | .h9 { 319 | height: 126px; 320 | } 321 | .h8 { 322 | height: 112px; 323 | } 324 | .h7 { 325 | height: 98px; 326 | } 327 | .h6 { 328 | height: 84px; 329 | } 330 | .h5 { 331 | height: 70px; 332 | } 333 | .h4 { 334 | height: 56px; 335 | } 336 | .h3 { 337 | height: 42px; 338 | } 339 | .h2 { 340 | height: 28px; 341 | } 342 | .h1 { 343 | height: 14px; 344 | } 345 | .h0 { 346 | height: 0px; 347 | } 348 | .h-1 { 349 | height: -14px; 350 | } 351 | .h-2 { 352 | height: -28px; 353 | } 354 | .h-3 { 355 | height: -42px; 356 | } 357 | .h-4 { 358 | height: -56px; 359 | } 360 | .h-5 { 361 | height: -70px; 362 | } 363 | .h-6 { 364 | height: -84px; 365 | } 366 | .h-7 { 367 | height: -98px; 368 | } 369 | .h-8 { 370 | height: -112px; 371 | } 372 | .h-9 { 373 | height: -126px; 374 | } 375 | .h-10 { 376 | height: -140px; 377 | } 378 | .h-11 { 379 | height: -154px; 380 | } 381 | .h-12 { 382 | height: -168px; 383 | } 384 | .h-13 { 385 | height: -182px; 386 | } 387 | .h-14 { 388 | height: -196px; 389 | } 390 | .h-15 { 391 | height: -210px; 392 | } 393 | /* Left = l */ 394 | .l15 { 395 | left: 210px; 396 | } 397 | .l14 { 398 | left: 196px; 399 | } 400 | .l13 { 401 | left: 182px; 402 | } 403 | .l12 { 404 | left: 168px; 405 | } 406 | .l11 { 407 | left: 154px; 408 | } 409 | .l10 { 410 | left: 140px; 411 | } 412 | .l9 { 413 | left: 126px; 414 | } 415 | .l8 { 416 | left: 112px; 417 | } 418 | .l7 { 419 | left: 98px; 420 | } 421 | .l6 { 422 | left: 84px; 423 | } 424 | .l5 { 425 | left: 70px; 426 | } 427 | .l4 { 428 | left: 56px; 429 | } 430 | .l3 { 431 | left: 42px; 432 | } 433 | .l2 { 434 | left: 28px; 435 | } 436 | .l1 { 437 | left: 14px; 438 | } 439 | .l0 { 440 | left: 0px; 441 | } 442 | .l-1 { 443 | left: -14px; 444 | } 445 | .l-2 { 446 | left: -28px; 447 | } 448 | .l-3 { 449 | left: -42px; 450 | } 451 | .l-4 { 452 | left: -56px; 453 | } 454 | .l-5 { 455 | left: -70px; 456 | } 457 | .l-6 { 458 | left: -84px; 459 | } 460 | .l-7 { 461 | left: -98px; 462 | } 463 | .l-8 { 464 | left: -112px; 465 | } 466 | .l-9 { 467 | left: -126px; 468 | } 469 | .l-10 { 470 | left: -140px; 471 | } 472 | .l-11 { 473 | left: -154px; 474 | } 475 | .l-12 { 476 | left: -168px; 477 | } 478 | .l-13 { 479 | left: -182px; 480 | } 481 | .l-14 { 482 | left: -196px; 483 | } 484 | .l-15 { 485 | left: -210px; 486 | } 487 | /* top = t */ 488 | .t15 { 489 | top: 210px; 490 | } 491 | .t14 { 492 | top: 196px; 493 | } 494 | .t13 { 495 | top: 182px; 496 | } 497 | .t12 { 498 | top: 168px; 499 | } 500 | .t11 { 501 | top: 154px; 502 | } 503 | .t10 { 504 | top: 140px; 505 | } 506 | .t9 { 507 | top: 126px; 508 | } 509 | .t8 { 510 | top: 112px; 511 | } 512 | .t7 { 513 | top: 98px; 514 | } 515 | .t6 { 516 | top: 84px; 517 | } 518 | .t5 { 519 | top: 70px; 520 | } 521 | .t4 { 522 | top: 56px; 523 | } 524 | .t3 { 525 | top: 42px; 526 | } 527 | .t2 { 528 | top: 28px; 529 | } 530 | .t1 { 531 | top: 14px; 532 | } 533 | .t0 { 534 | top: 0px; 535 | } 536 | .t-1 { 537 | top: -14px; 538 | } 539 | .t-2 { 540 | top: -28px; 541 | } 542 | .t-3 { 543 | top: -42px; 544 | } 545 | .t-4 { 546 | top: -56px; 547 | } 548 | .t-5 { 549 | top: -70px; 550 | } 551 | .t-6 { 552 | top: -84px; 553 | } 554 | .t-7 { 555 | top: -98px; 556 | } 557 | .t-8 { 558 | top: -112px; 559 | } 560 | .t-9 { 561 | top: -126px; 562 | } 563 | .t-10 { 564 | top: -140px; 565 | } 566 | .t-11 { 567 | top: -154px; 568 | } 569 | .t-12 { 570 | top: -168px; 571 | } 572 | .t-13 { 573 | top: -182px; 574 | } 575 | .t-14 { 576 | top: -196px; 577 | } 578 | .t-15 { 579 | top: -210px; 580 | } 581 | /* Width = w */ 582 | .w15 { 583 | width: 210px; 584 | } 585 | .w14 { 586 | width: 196px; 587 | } 588 | .w13 { 589 | width: 182px; 590 | } 591 | .w12 { 592 | width: 168px; 593 | } 594 | .w11 { 595 | width: 154px; 596 | } 597 | .w10 { 598 | width: 140px; 599 | } 600 | .w9 { 601 | width: 126px; 602 | } 603 | .w8 { 604 | width: 112px; 605 | } 606 | .w7 { 607 | width: 98px; 608 | } 609 | .w6 { 610 | width: 84px; 611 | } 612 | .w5 { 613 | width: 70px; 614 | } 615 | .w4 { 616 | width: 56px; 617 | } 618 | .w3 { 619 | width: 42px; 620 | } 621 | .w2 { 622 | width: 28px; 623 | } 624 | .w1 { 625 | width: 14px; 626 | } 627 | .w0 { 628 | width: 0px; 629 | } 630 | .w-1 { 631 | width: -14px; 632 | } 633 | .w-2 { 634 | width: -28px; 635 | } 636 | .w-3 { 637 | width: -42px; 638 | } 639 | .w-4 { 640 | width: -56px; 641 | } 642 | .w-5 { 643 | width: -70px; 644 | } 645 | .w-6 { 646 | width: -84px; 647 | } 648 | .w-7 { 649 | width: -98px; 650 | } 651 | .w-8 { 652 | width: -112px; 653 | } 654 | .w-9 { 655 | width: -126px; 656 | } 657 | .w-10 { 658 | width: -140px; 659 | } 660 | .w-11 { 661 | width: -154px; 662 | } 663 | .w-12 { 664 | width: -168px; 665 | } 666 | .w-13 { 667 | width: -182px; 668 | } 669 | .w-14 { 670 | width: -196px; 671 | } 672 | .w-15 { 673 | width: -210px; 674 | } 675 | /* Translate X */ 676 | .tx15 { 677 | -moz-transform: translateX(210px); 678 | -webkit-transform: translateX(210px); 679 | transform: translateX(210px); 680 | } 681 | .tx14 { 682 | -moz-transform: translateX(196px); 683 | -webkit-transform: translateX(196px); 684 | transform: translateX(196px); 685 | } 686 | .tx13 { 687 | -moz-transform: translateX(182px); 688 | -webkit-transform: translateX(182px); 689 | transform: translateX(182px); 690 | } 691 | .tx12 { 692 | -moz-transform: translateX(168px); 693 | -webkit-transform: translateX(168px); 694 | transform: translateX(168px); 695 | } 696 | .tx11 { 697 | -moz-transform: translateX(154px); 698 | -webkit-transform: translateX(154px); 699 | transform: translateX(154px); 700 | } 701 | .tx10 { 702 | -moz-transform: translateX(140px); 703 | -webkit-transform: translateX(140px); 704 | transform: translateX(140px); 705 | } 706 | .tx9 { 707 | -moz-transform: translateX(126px); 708 | -webkit-transform: translateX(126px); 709 | transform: translateX(126px); 710 | } 711 | .tx8 { 712 | -moz-transform: translateX(112px); 713 | -webkit-transform: translateX(112px); 714 | transform: translateX(112px); 715 | } 716 | .tx7 { 717 | -moz-transform: translateX(98px); 718 | -webkit-transform: translateX(98px); 719 | transform: translateX(98px); 720 | } 721 | .tx6 { 722 | -moz-transform: translateX(84px); 723 | -webkit-transform: translateX(84px); 724 | transform: translateX(84px); 725 | } 726 | .tx5 { 727 | -moz-transform: translateX(70px); 728 | -webkit-transform: translateX(70px); 729 | transform: translateX(70px); 730 | } 731 | .tx4 { 732 | -moz-transform: translateX(56px); 733 | -webkit-transform: translateX(56px); 734 | transform: translateX(56px); 735 | } 736 | .tx3 { 737 | -moz-transform: translateX(42px); 738 | -webkit-transform: translateX(42px); 739 | transform: translateX(42px); 740 | } 741 | .tx2 { 742 | -moz-transform: translateX(28px); 743 | -webkit-transform: translateX(28px); 744 | transform: translateX(28px); 745 | } 746 | .tx1 { 747 | -moz-transform: translateX(14px); 748 | -webkit-transform: translateX(14px); 749 | transform: translateX(14px); 750 | } 751 | .tx0 { 752 | -moz-transform: translateX(0px); 753 | -webkit-transform: translateX(0px); 754 | transform: translateX(0px); 755 | } 756 | .tx-1 { 757 | -moz-transform: translateX(-14px); 758 | -webkit-transform: translateX(-14px); 759 | transform: translateX(-14px); 760 | } 761 | .tx-2 { 762 | -moz-transform: translateX(-28px); 763 | -webkit-transform: translateX(-28px); 764 | transform: translateX(-28px); 765 | } 766 | .tx-3 { 767 | -moz-transform: translateX(-42px); 768 | -webkit-transform: translateX(-42px); 769 | transform: translateX(-42px); 770 | } 771 | .tx-4 { 772 | -moz-transform: translateX(-56px); 773 | -webkit-transform: translateX(-56px); 774 | transform: translateX(-56px); 775 | } 776 | .tx-5 { 777 | -moz-transform: translateX(-70px); 778 | -webkit-transform: translateX(-70px); 779 | transform: translateX(-70px); 780 | } 781 | .tx-6 { 782 | -moz-transform: translateX(-84px); 783 | -webkit-transform: translateX(-84px); 784 | transform: translateX(-84px); 785 | } 786 | .tx-7 { 787 | -moz-transform: translateX(-98px); 788 | -webkit-transform: translateX(-98px); 789 | transform: translateX(-98px); 790 | } 791 | .tx-8 { 792 | -moz-transform: translateX(-112px); 793 | -webkit-transform: translateX(-112px); 794 | transform: translateX(-112px); 795 | } 796 | .tx-9 { 797 | -moz-transform: translateX(-126px); 798 | -webkit-transform: translateX(-126px); 799 | transform: translateX(-126px); 800 | } 801 | .tx-10 { 802 | -moz-transform: translateX(-140px); 803 | -webkit-transform: translateX(-140px); 804 | transform: translateX(-140px); 805 | } 806 | .tx-11 { 807 | -moz-transform: translateX(-154px); 808 | -webkit-transform: translateX(-154px); 809 | transform: translateX(-154px); 810 | } 811 | .tx-12 { 812 | -moz-transform: translateX(-168px); 813 | -webkit-transform: translateX(-168px); 814 | transform: translateX(-168px); 815 | } 816 | .tx-13 { 817 | -moz-transform: translateX(-182px); 818 | -webkit-transform: translateX(-182px); 819 | transform: translateX(-182px); 820 | } 821 | .tx-14 { 822 | -moz-transform: translateX(-196px); 823 | -webkit-transform: translateX(-196px); 824 | transform: translateX(-196px); 825 | } 826 | .tx-15 { 827 | -moz-transform: translateX(-210px); 828 | -webkit-transform: translateX(-210px); 829 | transform: translateX(-210px); 830 | } 831 | /* Translate Y */ 832 | .ty15 { 833 | -moz-transform: translateY(210px); 834 | -webkit-transform: translateY(210px); 835 | transform: translateY(210px); 836 | } 837 | .ty14 { 838 | -moz-transform: translateY(196px); 839 | -webkit-transform: translateY(196px); 840 | transform: translateY(196px); 841 | } 842 | .ty13 { 843 | -moz-transform: translateY(182px); 844 | -webkit-transform: translateY(182px); 845 | transform: translateY(182px); 846 | } 847 | .ty12 { 848 | -moz-transform: translateY(168px); 849 | -webkit-transform: translateY(168px); 850 | transform: translateY(168px); 851 | } 852 | .ty11 { 853 | -moz-transform: translateY(154px); 854 | -webkit-transform: translateY(154px); 855 | transform: translateY(154px); 856 | } 857 | .ty10 { 858 | -moz-transform: translateY(140px); 859 | -webkit-transform: translateY(140px); 860 | transform: translateY(140px); 861 | } 862 | .ty9 { 863 | -moz-transform: translateY(126px); 864 | -webkit-transform: translateY(126px); 865 | transform: translateY(126px); 866 | } 867 | .ty8 { 868 | -moz-transform: translateY(112px); 869 | -webkit-transform: translateY(112px); 870 | transform: translateY(112px); 871 | } 872 | .ty7 { 873 | -moz-transform: translateY(98px); 874 | -webkit-transform: translateY(98px); 875 | transform: translateY(98px); 876 | } 877 | .ty6 { 878 | -moz-transform: translateY(84px); 879 | -webkit-transform: translateY(84px); 880 | transform: translateY(84px); 881 | } 882 | .ty5 { 883 | -moz-transform: translateY(70px); 884 | -webkit-transform: translateY(70px); 885 | transform: translateY(70px); 886 | } 887 | .ty4 { 888 | -moz-transform: translateY(56px); 889 | -webkit-transform: translateY(56px); 890 | transform: translateY(56px); 891 | } 892 | .ty3 { 893 | -moz-transform: translateY(42px); 894 | -webkit-transform: translateY(42px); 895 | transform: translateY(42px); 896 | } 897 | .ty2 { 898 | -moz-transform: translateY(28px); 899 | -webkit-transform: translateY(28px); 900 | transform: translateY(28px); 901 | } 902 | .ty1 { 903 | -moz-transform: translateY(14px); 904 | -webkit-transform: translateY(14px); 905 | transform: translateY(14px); 906 | } 907 | .ty0 { 908 | -moz-transform: translateY(0px); 909 | -webkit-transform: translateY(0px); 910 | transform: translateY(0px); 911 | } 912 | .ty-1 { 913 | -moz-transform: translateY(-14px); 914 | -webkit-transform: translateY(-14px); 915 | transform: translateY(-14px); 916 | } 917 | .ty-2 { 918 | -moz-transform: translateY(-28px); 919 | -webkit-transform: translateY(-28px); 920 | transform: translateY(-28px); 921 | } 922 | .ty-3 { 923 | -moz-transform: translateY(-42px); 924 | -webkit-transform: translateY(-42px); 925 | transform: translateY(-42px); 926 | } 927 | .ty-4 { 928 | -moz-transform: translateY(-56px); 929 | -webkit-transform: translateY(-56px); 930 | transform: translateY(-56px); 931 | } 932 | .ty-5 { 933 | -moz-transform: translateY(-70px); 934 | -webkit-transform: translateY(-70px); 935 | transform: translateY(-70px); 936 | } 937 | .ty-6 { 938 | -moz-transform: translateY(-84px); 939 | -webkit-transform: translateY(-84px); 940 | transform: translateY(-84px); 941 | } 942 | .ty-7 { 943 | -moz-transform: translateY(-98px); 944 | -webkit-transform: translateY(-98px); 945 | transform: translateY(-98px); 946 | } 947 | .ty-8 { 948 | -moz-transform: translateY(-112px); 949 | -webkit-transform: translateY(-112px); 950 | transform: translateY(-112px); 951 | } 952 | .ty-9 { 953 | -moz-transform: translateY(-126px); 954 | -webkit-transform: translateY(-126px); 955 | transform: translateY(-126px); 956 | } 957 | .ty-10 { 958 | -moz-transform: translateY(-140px); 959 | -webkit-transform: translateY(-140px); 960 | transform: translateY(-140px); 961 | } 962 | .ty-11 { 963 | -moz-transform: translateY(-154px); 964 | -webkit-transform: translateY(-154px); 965 | transform: translateY(-154px); 966 | } 967 | .ty-12 { 968 | -moz-transform: translateY(-168px); 969 | -webkit-transform: translateY(-168px); 970 | transform: translateY(-168px); 971 | } 972 | .ty-13 { 973 | -moz-transform: translateY(-182px); 974 | -webkit-transform: translateY(-182px); 975 | transform: translateY(-182px); 976 | } 977 | .ty-14 { 978 | -moz-transform: translateY(-196px); 979 | -webkit-transform: translateY(-196px); 980 | transform: translateY(-196px); 981 | } 982 | .ty-15 { 983 | -moz-transform: translateY(-210px); 984 | -webkit-transform: translateY(-210px); 985 | transform: translateY(-210px); 986 | } 987 | /* Translate Z */ 988 | .tz15 { 989 | -moz-transform: translateZ(210px); 990 | -webkit-transform: translateZ(210px); 991 | transform: translateZ(210px); 992 | } 993 | .tz14 { 994 | -moz-transform: translateZ(196px); 995 | -webkit-transform: translateZ(196px); 996 | transform: translateZ(196px); 997 | } 998 | .tz13 { 999 | -moz-transform: translateZ(182px); 1000 | -webkit-transform: translateZ(182px); 1001 | transform: translateZ(182px); 1002 | } 1003 | .tz12 { 1004 | -moz-transform: translateZ(168px); 1005 | -webkit-transform: translateZ(168px); 1006 | transform: translateZ(168px); 1007 | } 1008 | .tz11 { 1009 | -moz-transform: translateZ(154px); 1010 | -webkit-transform: translateZ(154px); 1011 | transform: translateZ(154px); 1012 | } 1013 | .tz10 { 1014 | -moz-transform: translateZ(140px); 1015 | -webkit-transform: translateZ(140px); 1016 | transform: translateZ(140px); 1017 | } 1018 | .tz9 { 1019 | -moz-transform: translateZ(126px); 1020 | -webkit-transform: translateZ(126px); 1021 | transform: translateZ(126px); 1022 | } 1023 | .tz8 { 1024 | -moz-transform: translateZ(112px); 1025 | -webkit-transform: translateZ(112px); 1026 | transform: translateZ(112px); 1027 | } 1028 | .tz7 { 1029 | -moz-transform: translateZ(98px); 1030 | -webkit-transform: translateZ(98px); 1031 | transform: translateZ(98px); 1032 | } 1033 | .tz6 { 1034 | -moz-transform: translateZ(84px); 1035 | -webkit-transform: translateZ(84px); 1036 | transform: translateZ(84px); 1037 | } 1038 | .tz5 { 1039 | -moz-transform: translateZ(70px); 1040 | -webkit-transform: translateZ(70px); 1041 | transform: translateZ(70px); 1042 | } 1043 | .tz4 { 1044 | -moz-transform: translateZ(56px); 1045 | -webkit-transform: translateZ(56px); 1046 | transform: translateZ(56px); 1047 | } 1048 | .tz3 { 1049 | -moz-transform: translateZ(42px); 1050 | -webkit-transform: translateZ(42px); 1051 | transform: translateZ(42px); 1052 | } 1053 | .tz2 { 1054 | -moz-transform: translateZ(28px); 1055 | -webkit-transform: translateZ(28px); 1056 | transform: translateZ(28px); 1057 | } 1058 | .tz1 { 1059 | -moz-transform: translateZ(14px); 1060 | -webkit-transform: translateZ(14px); 1061 | transform: translateZ(14px); 1062 | } 1063 | .tz0 { 1064 | -moz-transform: translateZ(0px); 1065 | -webkit-transform: translateZ(0px); 1066 | transform: translateZ(0px); 1067 | } 1068 | .tz-1 { 1069 | -moz-transform: translateZ(-14px); 1070 | -webkit-transform: translateZ(-14px); 1071 | transform: translateZ(-14px); 1072 | } 1073 | .tz-2 { 1074 | -moz-transform: translateZ(-28px); 1075 | -webkit-transform: translateZ(-28px); 1076 | transform: translateZ(-28px); 1077 | } 1078 | .tz-3 { 1079 | -moz-transform: translateZ(-42px); 1080 | -webkit-transform: translateZ(-42px); 1081 | transform: translateZ(-42px); 1082 | } 1083 | .tz-4 { 1084 | -moz-transform: translateZ(-56px); 1085 | -webkit-transform: translateZ(-56px); 1086 | transform: translateZ(-56px); 1087 | } 1088 | .tz-5 { 1089 | -moz-transform: translateZ(-70px); 1090 | -webkit-transform: translateZ(-70px); 1091 | transform: translateZ(-70px); 1092 | } 1093 | .tz-6 { 1094 | -moz-transform: translateZ(-84px); 1095 | -webkit-transform: translateZ(-84px); 1096 | transform: translateZ(-84px); 1097 | } 1098 | .tz-7 { 1099 | -moz-transform: translateZ(-98px); 1100 | -webkit-transform: translateZ(-98px); 1101 | transform: translateZ(-98px); 1102 | } 1103 | .tz-8 { 1104 | -moz-transform: translateZ(-112px); 1105 | -webkit-transform: translateZ(-112px); 1106 | transform: translateZ(-112px); 1107 | } 1108 | .tz-9 { 1109 | -moz-transform: translateZ(-126px); 1110 | -webkit-transform: translateZ(-126px); 1111 | transform: translateZ(-126px); 1112 | } 1113 | .tz-10 { 1114 | -moz-transform: translateZ(-140px); 1115 | -webkit-transform: translateZ(-140px); 1116 | transform: translateZ(-140px); 1117 | } 1118 | .tz-11 { 1119 | -moz-transform: translateZ(-154px); 1120 | -webkit-transform: translateZ(-154px); 1121 | transform: translateZ(-154px); 1122 | } 1123 | .tz-12 { 1124 | -moz-transform: translateZ(-168px); 1125 | -webkit-transform: translateZ(-168px); 1126 | transform: translateZ(-168px); 1127 | } 1128 | .tz-13 { 1129 | -moz-transform: translateZ(-182px); 1130 | -webkit-transform: translateZ(-182px); 1131 | transform: translateZ(-182px); 1132 | } 1133 | .tz-14 { 1134 | -moz-transform: translateZ(-196px); 1135 | -webkit-transform: translateZ(-196px); 1136 | transform: translateZ(-196px); 1137 | } 1138 | .tz-15 { 1139 | -moz-transform: translateZ(-210px); 1140 | -webkit-transform: translateZ(-210px); 1141 | transform: translateZ(-210px); 1142 | } 1143 | .rot0 { 1144 | -moz-transform: rotateY(0deg); 1145 | -webkit-transform: rotateY(0deg); 1146 | transform: rotateY(0deg); 1147 | } 1148 | .rot90 { 1149 | -moz-transform: rotateY(90deg); 1150 | -webkit-transform: rotateY(90deg); 1151 | transform: rotateY(90deg); 1152 | } 1153 | .rot-90 { 1154 | -moz-transform: rotateY(-90deg); 1155 | -webkit-transform: rotateY(-90deg); 1156 | transform: rotateY(-90deg); 1157 | } 1158 | .rot180 { 1159 | -moz-transform: rotateY(180deg); 1160 | -webkit-transform: rotateY(180deg); 1161 | transform: rotateY(180deg); 1162 | } 1163 | /* Orange, Skin color, Green, DEBUG (yellow, pink) */ 1164 | .o { 1165 | background-color: #fe3000; 1166 | } 1167 | .s { 1168 | background-color: #feb644; 1169 | } 1170 | .g { 1171 | background-color: #a48b00; 1172 | } 1173 | .y { 1174 | background-color: yellow; 1175 | } 1176 | /* DEBUG */ 1177 | .pink { 1178 | background-color: pink; 1179 | } 1180 | /* DEBUG */ 1181 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Pure CSS animated 3D Super Mario Icon - An experiment by Andreas Jacob 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |

Pure CSS animated 3D Super Mario Icon

27 |

» A time-wasting & fun experiment by Andreas Jacob «

28 |
29 | 30 | 31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 | 42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | 56 | 57 | 58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 | 69 | 70 |
71 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 | 103 |
104 | 105 | 106 | 107 |
108 | 109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 | 120 | 121 | 122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 | 132 | 133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 |
147 |
148 | 149 | 150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 | 166 |
167 | 168 | 169 |
170 | 171 | 172 | 173 |
174 |
175 |
176 |
177 | 178 | 179 |
180 |
181 |
182 |
183 | 184 | 185 |
186 |
187 |
188 | 189 |
190 |
191 |
192 | 193 |
194 |
195 |
196 | 197 |
198 |
199 |
200 | 201 |
202 |
203 |
204 | 205 | 206 |
207 |
208 |
209 | 210 |
211 |
212 |
213 | 214 | 215 | 216 |
217 |
218 |
219 | 220 |
221 |
222 |
223 | 224 | 225 |
226 |
227 |
228 | 229 |
230 |
231 |
232 | 233 |
234 |
235 |
236 | 237 |
238 |
239 |
240 | 241 |
242 |
243 |
244 | 245 |
246 |
247 |
248 | 249 | 250 | 251 |
252 |
253 |
254 | 255 |
256 |
257 |
258 | 259 |
260 |
261 |
262 | 263 |
264 |
265 |
266 | 267 |
268 |
269 |
270 | 271 | 272 | 273 |
274 |
275 |
276 | 277 | 278 |
279 |
280 |
281 | 282 |
283 |
284 |
285 | 286 | 287 |
288 |
289 |
290 | 291 |
292 |
293 |
294 | 295 | 296 |
297 |
298 |
299 | 300 |
301 |
302 |
303 | 304 | 305 | 306 | 307 | 308 | 309 |
310 |
311 |
312 | 313 |
314 |
315 |
316 | 317 |
318 |
319 |
320 | 321 | 322 | 323 |
324 |
325 |
326 | 327 |
328 |
329 |
330 | 331 |
332 |
333 |
334 | 335 |
336 |
337 |
338 | 339 |
340 |
341 |
342 | 343 |
344 |
345 |
346 | 347 | 348 | 349 | 350 |
351 |
352 |
353 | 354 |
355 |
356 |
357 | 358 |
359 |
360 |
361 | 362 | 363 | 364 | 365 | 366 |
367 |
368 |
369 | 370 |
371 |
372 |
373 | 374 | 375 | 376 | 377 | 378 | 379 | 380 |
381 |
382 |
383 | 384 |
385 |
386 |
387 |
388 |
389 |
390 | 391 |
392 |
393 |
394 |
395 |
396 |
397 | 398 |
399 |
400 |
401 |
402 |
403 |
404 | 405 |
406 |
407 |
408 | 409 | 410 | 411 |
412 |
413 |
414 | 415 | 416 |
417 |
418 |
419 | 420 |
421 |
422 |
423 | 424 | 425 |
426 |
427 |
428 | 429 |
430 |
431 |
432 | 433 | 434 |
435 |
436 |
437 | 438 |
439 |
440 |
441 | 442 |
443 | 444 | 445 | 446 |
447 | 448 | 449 |
450 | 451 | 452 |
453 |
454 |
455 | 456 |
457 |
458 |
459 | 460 |
461 |
462 |
463 | 464 |
465 |
466 |
467 |
468 |
469 |
470 | 471 | 472 | 473 |
474 |
475 |
476 |
477 |
478 |
479 |
480 |
481 |
482 |
483 | 484 |
485 |
486 |
487 |
488 | 489 |
490 | 491 | 492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |
505 |
506 |
507 |
508 |
509 |
510 |
511 |
512 |
513 |
514 |
515 | 516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 | 530 |
531 |
532 |
533 | 534 |
535 |
536 |
537 | 538 |
539 |
540 |
541 | 542 |
543 | 544 |
545 | 546 | 547 | 548 |
549 | 550 | 551 |
552 |
553 |
554 |
555 |
556 |
557 |
558 | 559 | 560 |
561 |
562 |
563 |
564 |
565 |
566 |
567 | 568 | 569 |
570 |
571 |
572 |
573 |
574 | 575 | 576 |
577 |
578 |
579 |
580 |
581 | 582 | 583 |
584 |
585 |
586 |
587 |
588 | 589 | 590 |
591 | 592 | 593 | 594 |
595 | 596 | 597 |
598 | 599 |
600 |
601 |
602 |
603 |
604 |
605 | 606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 | 614 |
615 |
616 |
617 |
618 |
619 |
620 | 621 |
622 | 623 | 624 | 625 |
626 | 627 |
628 |
629 |
630 |
631 |
632 |
633 | 634 |
635 |
636 |
637 |
638 | 639 |
640 |
641 |
642 | 643 |
644 |
645 |
646 |
647 | 648 |
649 |
650 |
651 |
652 |
653 |
654 |
655 |
656 |
657 |
658 |
659 | 660 | 661 |
662 |
663 |
664 |
665 |
666 | 667 |
668 |
669 |
670 |
671 |
672 | 673 |
674 | 675 | 676 | 677 |
678 | 679 |
680 |
681 |
682 |
683 |
684 |
685 | 686 |
687 |
688 |
689 |
690 |
691 |
692 |
693 |
694 |
695 |
696 |
697 |
698 |
699 |
700 | 701 |
702 | 703 | 704 | 705 |
706 | 707 |
708 |
709 |
710 |
711 |
712 |
713 | 714 | 715 | 716 |
717 | 718 | 719 | 720 |
721 | 722 |
723 |
724 |
725 |
726 |
727 |
728 | 729 | 730 |
731 | 732 | 733 | 734 |
735 | 736 |
737 |
738 |
739 |
740 |
741 |
742 | 743 |
744 |
745 |
746 |
747 |
748 | 749 |
750 |
751 |
752 |
753 |
754 |
755 |
756 |
757 |
758 |
759 |
760 |
761 |
762 |
763 | 764 |
765 | 766 | 767 | 768 |
769 | 770 |
771 |
772 |
773 |
774 |
775 |
776 | 777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
790 |
791 | 792 |
793 |
794 |
795 |
796 |
797 |
798 |
799 |
800 |
801 |
802 |
803 | 804 |
805 |
806 |
807 |
808 |
809 | 810 |
811 |
812 |
813 |
814 |
815 | 816 |
817 | 818 | 819 |
820 | 821 |
822 |
823 |
824 |
825 |
826 |
827 | 828 |
829 |
830 |
831 |
832 |
833 |
834 |
835 | 836 |
837 |
838 |
839 |
840 |
841 |
842 | 843 |
844 | 845 | 846 |
847 | 848 |
849 |
850 |
851 |
852 | 853 |
854 |
855 |
856 | 857 |
858 |
859 |
860 | 861 |
862 |
863 |
864 | 865 | 866 | 867 |
868 |
869 |
870 | 871 |
872 |
873 |
874 | 875 |
876 |
877 |
878 | 879 |
880 |
881 |
882 | 883 |
884 | 885 | 886 |
887 |
888 |
889 |
890 | 891 |
892 |
893 |
894 | 895 |
896 |
897 |
898 | 899 |
900 |
901 |
902 | 903 | 904 | 905 |
906 |
907 |
908 | 909 | 910 | 911 |
912 |
913 |
914 | 915 |
916 |
917 |
918 | 919 | 920 |
921 | 922 | 923 |
924 |
925 |
926 |
927 |
928 | 929 |
930 |
931 |
932 | 933 |
934 |
935 |
936 | 937 |
938 | 939 | 940 |
941 | 942 | 943 | 944 |
945 | 946 |
947 |
948 |
949 |
950 | 951 |
952 |
953 |
954 | 955 |
956 |
957 |
958 | 959 |
960 |
961 |
962 | 963 | 964 | 965 |
966 |
967 |
968 | 969 |
970 |
971 |
972 | 973 |
974 |
975 |
976 | 977 |
978 |
979 |
980 |
981 | 982 | 983 |
984 | 985 |
986 |
987 |
988 | 989 |
990 |
991 |
992 |
993 | 994 | 995 |
996 |
997 |
998 |
999 | 1000 |
1001 |
1002 |
1003 | 1004 |
1005 |
1006 |
1007 |
1008 |
1009 |
1010 |
1011 | 1012 |
1013 |
1014 |
1015 |
1016 |
1017 |
1018 |
1019 |
1020 | 1021 | 1022 |
1023 | 1024 |
1025 |
1026 |
1027 |
1028 |
1029 |
1030 | 1031 |
1032 |
1033 |
1034 |
1035 |
1036 |
1037 | 1038 | 1039 | 1040 |
1041 |
1042 |
1043 |
1044 | 1045 |
1046 |
1047 |
1048 | 1049 |
1050 | 1051 |
1052 | 1053 | 1054 | 1055 | 1056 |
1057 | 1058 | 1059 |
1060 | 1061 |
1062 | 1063 |
1064 | 1065 |
Hover over the Icon to see the grid & perspective.
1066 | 1067 |
1068 | 1069 | 1070 |
1071 | 1072 |
1073 | 1074 | 1088 | 1089 | 1090 |
1091 | 1092 |
1093 | 1094 |
« Read the article: Pure CSS animated 3D Super Mario Icon
1095 | 1096 |
1097 | 1098 |
1099 | 1100 | 1101 |
1102 | 1103 |
1104 | 1105 | 1106 | 1107 |
1108 |
1109 | 1110 | 1118 | 1119 | 1120 | 1121 | --------------------------------------------------------------------------------