Make hexaflexigon with your own photos :)
A Pen by Sara Mansouri on CodePen.
Created
June 8, 2015 04:07
-
-
Save sara-mansouri/bb31795147da8a74821c to your computer and use it in GitHub Desktop.
hexaflexigon -6photos
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="photo"> | |
| <img class="mosalas one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img class="m1 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img class="m2 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img class="m3 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="mosalas two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img class="m1 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img class="m2 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img class="m3 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="mosalas three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img class="m1 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img class="m2 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img class="m3 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| </div> | |
| <!--3 photo template> | |
| <div class="photo" id="template1"> | |
| <img id="lozi1a" class="lozia one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="lozi1b" class="lozib one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="lozi1c" class="lozic one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="lozi2a" class="lozia two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="lozi2b" class="lozib two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="lozi2c" class="lozic two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="lozi3a" class="lozia three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img id="lozi3b" class="lozib three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img id="lozi3c" class="lozic three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| </div--> | |
| <div class="photo"> | |
| <img class="mosalas one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img class="m4 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img class="m5 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img class="m6 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="mosalas two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img class="m4 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img class="m5 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img class="m6 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="mosalas three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| <img class="m4 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| <img class="m5 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| <img class="m6 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| </div> | |
| <!--template2 6 photos--> | |
| <div class="photo template2" id="template1"> | |
| <img id="l1a" class="m1 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="l1b" class="m2 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="l1c" class="m3 one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img> | |
| <img id="l2a" class="m1 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="l2b" class="m2 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="l2c" class="m3 two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img> | |
| <img id="l3a" class="m1 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img id="l3b" class="m2 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img id="l3c" class="m3 three" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png"></img> | |
| <img id="l4a" class="m4 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img id="l4b" class="m5 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img id="l4c" class="m6 one" src="https://lh5.googleusercontent.com/I2UTpnaiTpkqXDxD0YNe9naAF8a3pl93wixFWvGhlYhrYrE0mUpkfx06QSDM_8AGz5xV8o66U1gCM4c=w1345-h656"></img> | |
| <img id="l5a" class="m4 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img id="l5b" class="m5 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img id="l5c" class="m6 two" src="https://lh4.googleusercontent.com/NoyJmojcZqvmwu7ex1tdSNwmzxwThVhvHtdvtKmMmmUVkNud-F0yF9xNYqJTR4PgYLCRfVScEQu9SFg=w1345-h656"></img> | |
| <img id="l6a" class="m4 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| <img id="l6b" class="m5 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| <img id="l6c" class="m6 three" src="https://lh6.googleusercontent.com/yGHjFDseM0NPu8jjKdlnCSnDnVOLag3B4lTl6Mmfs3P3ubABRsfn7FTpH5-MkOLxJGyvwhYM9JU4YdY=w1345-h656"></img> | |
| </div> | |
| <div class="photo"><img class="poly" /></div> | |
| <div class="photo"><img class="poly" /></div> | |
| <div class="photo"><img class="poly" /></div> | |
| <div class="photo"><img class="poly" /></div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{float:left; z-index:0;} | |
| .one{ background:aqua;} | |
| .two{ background:bisque;} | |
| .three{ background:antiquewhite;} | |
| .template2{ | |
| top: 1100px !important; | |
| background-position-y: 101px !important; | |
| height:280px !important; | |
| background-size: contain !important;} | |
| #template1{ | |
| z-index:2; | |
| height: 180px; | |
| background-repeat: no-repeat; | |
| width: 562px; | |
| background-size: 100% 100%; | |
| position: absolute; | |
| top: 600px; | |
| left: 70px; | |
| background-image: url(https://lh5.googleusercontent.com/xle0ePSBJRq-wpLk7J9cYar2ncCwBFtDIX-TU0Qb8IiBjNfTIbBXeGX3kmpIg4gQ_ZvjREpsWusNr54=w1345-h478-rw); | |
| } | |
| .photo{left:0px; width:100%;} | |
| .poly{ | |
| visibility:hidden; | |
| width:200px; | |
| height:173px; | |
| -webkit-clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); | |
| clip-path: polygon(75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%, 25% 0); | |
| } | |
| .lozic{ | |
| position:absolute;left:200px; | |
| transform: rotate(-120deg); | |
| -ms-transform: rotate(-120deg); | |
| -moz-transform: rotate(-120deg); | |
| -webkit-transform: rotate(-120deg); | |
| -o-transform: rotate(-120deg); | |
| width:200px; | |
| height:173px; | |
| -webkit-clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%);clip-path: polygon(25% 0, 50% 50%, 25% 100%, 0 50%); | |
| } | |
| .lozia{ | |
| position:absolute;left:400px; | |
| transform: rotate(0deg); | |
| -ms-transform: rotate(0deg); | |
| -moz-transform: rotate(0deg); | |
| -webkit-transform: rotate(0deg); | |
| -o-transform: rotate(0deg); | |
| width:200px; | |
| height:173px; | |
| -webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%);clip-path: polygon(100% 50%, 50% 50%, 25% 100%, 75% 100%); | |
| } | |
| .lozib{ | |
| position:absolute;left:600px; | |
| transform: rotate(120deg); | |
| -ms-transform: rotate(120deg); | |
| -moz-transform: rotate(120deg); | |
| -webkit-transform: rotate(120deg); | |
| -o-transform: rotate(120deg); | |
| width:200px; | |
| height:173px; | |
| -webkit-clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0);clip-path: polygon(100% 50%, 50% 50%, 25% 0, 75% 0); | |
| } | |
| #lozi3c{top:-85px;left:2px;} | |
| #lozi1c{top:-85px;left:104px;} | |
| #lozi2a{top:-85px;left:206px;} | |
| #lozi3b{top:-85px;left:308px;} | |
| #lozi1b{top:4px;left:-48px;} | |
| #lozi2c{top:4px;left:54px;} | |
| #lozi3a{top:4px;left:156px;} | |
| #lozi1a{top:4px;left:258px;} | |
| #lozi2b{top:4px;left:360px;} | |
| .kaj{ | |
| display:none; | |
| height:200px; | |
| width:173px; | |
| -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); | |
| } | |
| .mosalas{ | |
| height:200px; | |
| width:173px; | |
| -webkit-clip-path: polygon(50% 0%, 0 75%, 100% 75%); | |
| clip-path: polygon(50% 0%, 0 75%, 100% 75%); | |
| } | |
| .part1{ top:-85px !important; left:450px !important; | |
| -webkit-clip-path: polygon(100% 50%, 25% 100%, 75% 100%) !important; | |
| clip-path: polygon(100% 50%, 25% 100%, 75% 100%)!important;} | |
| .part2{top:-85px !important; | |
| left:440px !important; | |
| -webkit-clip-path: polygon(100% 50%, 25% 100%, 50% 50%)!important; | |
| clip-path: polygon(100% 50%, 25% 100%, 50% 50%)!important;} | |
| .part3{ | |
| top:-85px !important; | |
| left:620px !important; | |
| -webkit-clip-path: polygon(100% 50%, 25% 0, 50% 50%) !important; | |
| clip-path: polygon(100% 50%, 25% 0, 50% 50%) !important; | |
| } | |
| .part4{ | |
| top:-85px !important; | |
| left:630px !important; | |
| -webkit-clip-path: polygon(100% 50%, 25% 0, 75% 0) !important; | |
| clip-path: polygon(100% 50%, 25% 0, 75% 0) !important; | |
| } | |
| .part5{ | |
| top:-85px !important; | |
| left:230px !important; | |
| -webkit-clip-path: polygon(25% 100%, 25% 0, 0 50%) !important; | |
| clip-path: polygon(25% 100%, 25% 0, 0 50%) !important; | |
| } | |
| .part6{ | |
| top:-85px !important; | |
| left:220px !important; | |
| -webkit-clip-path: polygon(25% 100%, 25% 0, 50% 50%) !important; | |
| clip-path: polygon(25% 100%, 25% 0, 50% 50%) !important; | |
| } | |
| .m1{ | |
| position:absolute; | |
| left:200px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(50% 0%, 0 75%, 50% 50%); | |
| clip-path: polygon(50% 0%, 0 75%, 50% 50%); | |
| transform: rotate(210deg); | |
| -ms-transform: rotate(210deg); | |
| -moz-transform: rotate(210deg); | |
| -webkit-transform: rotate(210deg); | |
| -o-transform: rotate(210deg); | |
| } | |
| .m2{ | |
| position:absolute; | |
| left:400px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(50% 0%, 100% 75%, 50% 50%); | |
| clip-path: polygon(50% 0%, 100% 75%, 50% 50%); | |
| transform: rotate(90deg); | |
| -ms-transform: rotate(90deg); | |
| -moz-transform: rotate(90deg); | |
| -webkit-transform: rotate(90deg); | |
| -o-transform: rotate(90deg); | |
| } | |
| .m3{ | |
| position:absolute; | |
| left:600px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(0 75%, 100% 75%, 50% 50%); | |
| clip-path: polygon(0 75%, 100% 75%, 50% 50%); | |
| transform: rotate(-30deg); | |
| -ms-transform: rotate(-30deg); | |
| -moz-transform: rotate(-30deg); | |
| -webkit-transform: rotate(-30deg); | |
| -o-transform: rotate(-30deg); | |
| } | |
| .m4{ | |
| position:absolute; | |
| left:200px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(50% 0%, 0 75%, 50% 50%); | |
| clip-path: polygon(50% 0%, 0 75%, 50% 50%); | |
| transform: rotate(30deg); | |
| -ms-transform: rotate(30deg); | |
| -moz-transform: rotate(30deg); | |
| -webkit-transform: rotate(30deg); | |
| -o-transform: rotate(30deg); | |
| } | |
| .m5{ | |
| position:absolute; | |
| left:400px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(50% 0%, 100% 75%, 50% 50%); | |
| clip-path: polygon(50% 0%, 100% 75%, 50% 50%); | |
| transform: rotate(-90deg); | |
| -ms-transform: rotate(-90deg); | |
| -moz-transform: rotate(-90deg); | |
| -webkit-transform: rotate(-90deg); | |
| -o-transform: rotate(-90deg); | |
| } | |
| .m6{ | |
| position:absolute; | |
| left:600px; | |
| width:173px; | |
| height:200px; | |
| -webkit-clip-path: polygon(0 75%, 100% 75%, 50% 50%); | |
| clip-path: polygon(0 75%, 100% 75%, 50% 50%); | |
| transform: rotate(150deg); | |
| -ms-transform: rotate(150deg); | |
| -moz-transform: rotate(150deg); | |
| -webkit-transform: rotate(150deg); | |
| -o-transform: rotate(150deg); | |
| } | |
| #l3c{top:3px;left:16px!important;} | |
| #l1c{top:3px;left:118px!important;} | |
| #l2a{top:3px;left:219px!important;} | |
| #l3b{top:3px;left:321px!important;} | |
| #l1b{top:90px;left:-33px!important;} | |
| #l2c{top:90px;left:67px!important;} | |
| #l3a{top:90px;left:169px!important;} | |
| #l1a{top:90px;left:271px!important;} | |
| #l2b{top:90px;left:373px!important;} | |
| #l6b{top:87px;left:66px!important;} | |
| #l5b{top:87px;left:168px!important;} | |
| #l4b{top:87px;left:270px!important;} | |
| #l6c{top:87px;left:372px!important;} | |
| #l5c{top:177px;left:16px!important;} | |
| #l4c{top:177px;left:117px!important;} | |
| #l6a{top:177px;left:219px!important;} | |
| #l5a{top:177px;left:321px!important;} | |
| #l4a{top:177px;left:422px!important;} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment