hexaflexigon2

hexaflexigon2.markdown

hexaflexigon2

Make hexaflexigon with your own photos :)

A Pen by Sara Mansouri on CodePen.

License.

index.html

<div class="photo">
  <img class="poly one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>

  <img class="lozia one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
  <img class="lozib one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
  <img class="lozic one" src="https://teach.mozilla.org/img/pages/event-resources/resource-thumbnails-01.png"></img>
  </div>
<div class="photo">
  <img class="poly two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>

  <img class="lozia two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
  <img class="lozib two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
  <img class="lozic two" src="http://www2.psd100.com/ppp/2013/10/0501/mozilla-firefox-icon-1005140117.png"></img>
</div>

<div class="photo">

  <img class="poly three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>

  <img class="lozia three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>
  <img class="lozib three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>
  <img class="lozic three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>
</div>
<!--next-->
<div class="photo" id="pattern">
  <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/[email protected]"></img>
  <img id="lozi3b" class="lozib three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>
  <img id="lozi3c" class="lozic three" src="https://teach.mozilla.org/img/pages/event-resources/[email protected]"></img>
</div>

style.css

*{float:left; }
.one{  background:aqua;}
.two{  background:bisque;}
.three{  background:antiquewhite;}
#pattern{ 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%);
}
.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:600px;left:100px;}
#lozi1c{top:600px;left:202px;}
#lozi2a{top:600px;left:304px;}
#lozi3b{top:600px;left:406px;}

#lozi1b{top:690px;left:48px;}
#lozi2c{top:690px;left:150px;}
#lozi3a{top:690px;left:252px;}
#lozi1a{top:690px;left:354px;}
#lozi2b{top:690px;left:456px;}