Make a 3D hexaflexigon with your own photos :) Just change the URL of images to your desired photos URL (Please upload them somewhere first(Flickr is a good option)), It needs to be changed in CSS classes named one,two, three, and four and print out the template.
A Pen by Sara Mansouri on CodePen.
Make hexaflexigon with your own photos :)
A Pen by Sara Mansouri on CodePen.
| <div class="photo"> | |
| <img class="poly one" ></img> | |
| <img class="lozia one" ></img> | |
| <img class="lozib one"></img> | |
| <img class="lozic one"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="poly two"></img> | |
| <img class="lozia two"></img> | |
| <img class="lozib two"></img> | |
| <img class="lozic two"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="poly three"></img> | |
| <img class="lozia three"></img> | |
| <img class="lozib three"></img> | |
| <img class="lozic three"></img> | |
| </div> | |
| <div class="photo"> | |
| <img class="poly four"></img> | |
| <img class="lozia four"></img> | |
| <img class="lozib four"></img> | |
| <img class="lozic four"></img> | |
| </div> | |
| <!--next--> | |
| <div class="photo pattern" id="pattern"> | |
| <img id="lozi1a" class="lozia one" ></img> | |
| <img id="lozi1c" class="lozib one" ></img> | |
| <img id="lozi1b" class="lozic one" ></img> | |
| <img id="lozi2a" class="lozia two" ></img> | |
| <img id="lozi2c" class="lozib two" ></img> | |
| <img id="lozi2b" class="lozic two" ></img> | |
| <img id="lozi3a" class="lozia three" ></img> | |
| <img id="lozi3c" class="lozib three" ></img> | |
| <img id="lozi3b" class="lozic three" ></img> | |
| <img id="lozi4a" class="lozia four"></img> | |
| <img id="lozi4c" class="lozib four"></img> | |
| <img id="lozi4b" class="lozic four"></img> | |
| </div> | |
| *{float:left; z-index:0;} | |
| .one{ background:aqua; | |
| content:url("https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png") !important; | |
| } | |
| .two{ background:bisque; | |
| content:url("https://c1.staticflickr.com/9/8893/18416750928_c5495d9eb2_z.jpg") !important; | |
| } | |
| .three{ background:antiquewhite; | |
| content:url("https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-03@2x.png") !important;} | |
| .four{ background:bisque; | |
| content:url("http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png") !important; | |
| } | |
| #pattern{ | |
| z-index:2; | |
| height: 455px; | |
| background-repeat: no-repeat; | |
| width: 560px; | |
| background-size: 100% 100%; | |
| position: absolute; | |
| top: 750px; | |
| left: 70px; | |
| /*background-image: url(https://c1.staticflickr.com/9/8860/18604492365_d8d169ec16_z.jpg);*/ | |
| /*background-image: url(https://c1.staticflickr.com/1/424/18439197599_ccac848318_z.jpg);*/ | |
| background-image: url("https://c1.staticflickr.com/1/372/18631823651_36e9bfc7c9_z.jpg"); | |
| } | |
| .ppattern{ background-image: url(http://www.scientificamerican.com/sciam/cache/file/8C649A0C-74A0-460D-AF1C5E66C605563A.jpg); | |
| } | |
| .photo{left:0px; width:100%;} | |
| .poly{ | |
| 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%); | |
| /* -webkit-clip-path: polygon(48% 51%, 0 76%, 0 29%, 50% 0); | |
| clip-path: polygon(48% 51%, 0 76%, 0 29%, 50% 0);*/ | |
| } | |
| .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(50% 50%, 100% 75%, 47% 100%, 0 75%); | |
| clip-path: polygon(50% 50%, 100% 75%, 47% 100%, 0 75%);*/ | |
| -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); | |
| /* -webkit-clip-path: polygon(50% 50%, 100% 75%, 100% 25%, 50% 0); | |
| clip-path: polygon(50% 50%, 100% 75%, 100% 25%, 50% 0);*/ | |
| } | |
| #lozi1a{top:3px;left:216px;} | |
| #lozi1b{top:90px;left:68px;} | |
| #lozi1c{top:179px;left:-81px;} | |
| #lozi2a{top:3px;left:318px;} | |
| #lozi2b{top:90px;left:168px;} | |
| #lozi2c{top:179px;left:21px;} | |
| #lozi3a{top:90px;left:264px;} | |
| #lozi3b{top:179px;left:123px;} | |
| #lozi3c{top:264px;left:-23px;} | |
| #lozi4a{top:-84px;left:270px;} | |
| #lozi4b{top:3px;left:115px;} | |
| #lozi4c{top:90px;left:-35px;} | |
| /* | |
| #lozi4a{top:90px;left:470px;} | |
| #lozi4b{top:177px;left:290px;} | |
| #lozi4c{top:264px;left:120px;}*/ | |
| /**/ |