|
|
Line 2: |
Line 2: |
| <html> | | <html> |
| <head> | | <head> |
− | <meta charset="utf-8" >
| |
− | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
| |
| <style> | | <style> |
| | | |
Line 86: |
Line 84: |
| } | | } |
| | | |
− | | + | .right { |
− | | + | float: right; |
− | .flip-container { | + | width: 300px; |
− | -webkit-perspective: 1000;
| + | padding: 10px; |
− | -moz-perspective: 1000;
| + | |
− | -ms-perspective: 1000;
| + | |
− | perspective: 1000;
| + | |
− | -ms-transform: perspective(1000px);
| + | |
− | -moz-transform: perspective(1000px);
| + | |
− | -moz-transform-style: preserve-3d;
| + | |
− | -ms-transform-style: preserve-3d;
| + | |
− | border: 1px solid #ccc;
| + | |
| } | | } |
| | | |
− | /* START: Accommodating for IE */
| + | .left { |
− | .flip-container:hover .back, .flip-container.hover .back { | + | float: left; |
− | -webkit-transform: rotateY(0deg);
| + | width: 300px; |
− | -moz-transform: rotateY(0deg);
| + | padding: 10px; |
− | -o-transform: rotateY(0deg);
| + | |
− | -ms-transform: rotateY(0deg);
| + | |
− | transform: rotateY(0deg);
| + | |
| } | | } |
− | .flip-container:hover .front, .flip-container.hover .front {
| |
− | -webkit-transform: rotateY(180deg);
| |
− | -moz-transform: rotateY(180deg);
| |
− | -o-transform: rotateY(180deg);
| |
− | transform: rotateY(180deg);
| |
− | }
| |
− | /* END: Accommodating for IE */
| |
− |
| |
− | .flip-container, .front, .back {
| |
− | width: 400px;
| |
− | height: 450px;
| |
− | }
| |
− | .flipper {
| |
− | -webkit-transition: 0.6s;
| |
− | -webkit-transform-style: preserve-3d;
| |
− | -ms-transition: 0.6s;
| |
− | -moz-transition: 0.6s;
| |
− | -moz-transform: perspective(1000px);
| |
− | -moz-transform-style: preserve-3d;
| |
− | -ms-transform-style: preserve-3d;
| |
− | transition: 0.6s;
| |
− | transform-style: preserve-3d;
| |
− | position: relative;
| |
− | }
| |
− | .front, .back {
| |
− | -webkit-backface-visibility: hidden;
| |
− | -moz-backface-visibility: hidden;
| |
− | -ms-backface-visibility: hidden;
| |
− | backface-visibility: hidden;
| |
− | -webkit-transition: 0.6s;
| |
− | -webkit-transform-style: preserve-3d;
| |
− | -webkit-transform: rotateY(0deg);
| |
− | -moz-transition: 0.6s;
| |
− | -moz-transform-style: preserve-3d;
| |
− | -moz-transform: rotateY(0deg);
| |
− | -o-transition: 0.6s;
| |
− | -o-transform-style: preserve-3d;
| |
− | -o-transform: rotateY(0deg);
| |
− | -ms-transition: 0.6s;
| |
− | -ms-transform-style: preserve-3d;
| |
− | -ms-transform: rotateY(0deg);
| |
− | transition: 0.6s;
| |
− | transform-style: preserve-3d;
| |
− | transform: rotateY(0deg);
| |
− | position: absolute;
| |
− | top: 0;
| |
− | left: 0;
| |
− | }
| |
− | .front {
| |
− | -webkit-transform: rotateY(0deg);
| |
− | -ms-transform: rotateY(0deg);
| |
− | background: lightgreen;
| |
− | z-index: 2;
| |
− | }
| |
− | .back {
| |
− | background: lightblue;
| |
− | -webkit-transform: rotateY(-180deg);
| |
− | -moz-transform: rotateY(-180deg);
| |
− | -o-transform: rotateY(-180deg);
| |
− | -ms-transform: rotateY(-180deg);
| |
− | transform: rotateY(-180deg);
| |
− | }
| |
− |
| |
| | | |
| | | |
| + | .round { |
| + | border-radius: 50%; |
| + | overflow: hidden; |
| + | width: 400px; |
| + | height: 400px; |
| + | } |
| + | .round img { |
| + | display: block; |
| + | /* Stretch |
| + | height: 100%; |
| + | width: 100%; */ |
| + | min-width: 100%; |
| + | min-height: 100%; |
| + | } |
| | | |
| | | |
Line 254: |
Line 192: |
| </font></b><br> | | </font></b><br> |
| <br> | | <br> |
| + | |
| + | |
| + | <div class="right"> |
| + | <div class="round"> |
| + | <img src="https://static.igem.org/mediawiki/2017/2/26/Andrew.PNG" alt=""/> |
| + | </div> |
| + | </div> |
| | | |
| | | |
| <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> | | <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> |
| <div class="flipper"> | | <div class="flipper"> |
− | <div class="front"><img src="https://static.igem.org/mediawiki/2017/2/26/Andrew.PNG" width="450" height="450" class=" igem-logo"></a></div>
| |
| <div class="back"><p align="justify"> | | <div class="back"><p align="justify"> |
| <br> | | <br> |