Difference between revisions of "Team:Uppsala"
Line 126: | Line 126: | ||
margin-top: 14px; | margin-top: 14px; | ||
margin-bottom: 3px; | margin-bottom: 3px; | ||
+ | } | ||
+ | |||
+ | |||
+ | *flipping images*/ | ||
+ | |||
+ | /* entire container, keeps perspective */ | ||
+ | .flip-container{ | ||
+ | /*perspective*/ | ||
+ | -webkit-perspective:1000; | ||
+ | -moz-perspective:1000; | ||
+ | -ms-perspective:1000; | ||
+ | -o-perspective:1000; | ||
+ | perspective:1000; | ||
+ | } | ||
+ | /* flip the pane when hovered */ | ||
+ | .flipped { | ||
+ | /*transform*/ | ||
+ | -webkit-transform:rotateY(180deg); | ||
+ | -moz-transform:rotateY(180deg); | ||
+ | -ms-transform:rotateY(180deg); | ||
+ | -o-transform:rotateY(180deg); | ||
+ | transform:rotateY(180deg); | ||
+ | } | ||
+ | |||
+ | .flip-container, .front, .back{ | ||
+ | width: 100%; | ||
+ | height: 461px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* flip speed goes here */ | ||
+ | .flipper { | ||
+ | /*transition*/ | ||
+ | -webkit-transition:1s; | ||
+ | -moz-transition:1s; | ||
+ | -o-transition:1s; | ||
+ | transition:1s; | ||
+ | /*transform-style*/ | ||
+ | -webkit-transform-style:preserve-3d; | ||
+ | -moz-transform-style:preserve-3d; | ||
+ | -ms-transform-style:preserve-3d; | ||
+ | -o-transform-style:preserve-3d; | ||
+ | transform-style:preserve-3d; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | /* hide back of pane during swap */ | ||
+ | .front, .back{ | ||
+ | /*backface-visibility*/ | ||
+ | -webkit-backface-visibility:hidden; | ||
+ | -moz-backface-visibility:hidden; | ||
+ | -ms-backface-visibility:hidden; | ||
+ | -o-backface-visibility:hidden; | ||
+ | backface-visibility:hidden; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | left:0; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | /* front pane, placed above back */ | ||
+ | .front{ | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* back, initially hidden pane */ | ||
+ | .back{ | ||
+ | /*transform*/ | ||
+ | -webkit-transform:rotateY(180deg); | ||
+ | -moz-transform:rotateY(180deg); | ||
+ | -ms-transform:rotateY(180deg); | ||
+ | -o-transform:rotateY(180deg); | ||
+ | transform:rotateY(180deg); | ||
} | } | ||
Line 132: | Line 207: | ||
<body> | <body> | ||
− | <img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;height:100%;"> | + | <!--<img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;height:100%;">--> |
+ | |||
+ | <div class="flip-container"> | ||
+ | <div class="flipper" onclick="this.classList.toggle('flipped')"> | ||
+ | <div class="front"> | ||
+ | <img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;"> | ||
+ | </div> | ||
+ | <div class="back"> | ||
+ | <img id="home_image" src="https://static.igem.org/mediawiki/2015/4/4d/Uppsala_NewFront.png" alt="iGEM Uppsala" style="width:100%;"> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
<div id="main"> | <div id="main"> | ||
Revision as of 22:16, 19 November 2015
Abstract