Skip to content

Instantly share code, notes, and snippets.

@sara-mansouri
Last active August 29, 2015 14:22
Show Gist options
  • Save sara-mansouri/eec48eb3ab161e114166 to your computer and use it in GitHub Desktop.
Save sara-mansouri/eec48eb3ab161e114166 to your computer and use it in GitHub Desktop.
3D hexaflexigon - 4 photos

3D hexaflexigon - 4 photos

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.

License.

<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;}*/
/**/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment