Oycheungad (Talk | contribs) |
Oycheungad (Talk | contribs) |
||
Line 383: | Line 383: | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div class=" | + | <div class="cards_"> |
− | <div class=" | + | <div class="cards_axis "> |
− | <figure class=" | + | <figure class="cards_front"> |
<img src="https://static.igem.org/mediawiki/2017/6/6d/Hkusteric.png" alt=""/> | <img src="https://static.igem.org/mediawiki/2017/6/6d/Hkusteric.png" alt=""/> | ||
<figcaption class="cards__description--front"> | <figcaption class="cards__description--front"> | ||
− | <span> | + | <span>Wiki</span> |
</figcaption> | </figcaption> | ||
</figure> | </figure> | ||
Line 400: | Line 400: | ||
/* REUSABLE CSS3 "PLUGIN" CODE IF YOU WILL */ | /* REUSABLE CSS3 "PLUGIN" CODE IF YOU WILL */ | ||
.cards * { | .cards * { | ||
+ | width: 100%; | ||
+ | } | ||
+ | .cards_ *{ | ||
width: 100%; | width: 100%; | ||
} | } | ||
.cards__axis { | .cards__axis { | ||
position: relative; | position: relative; | ||
+ | } | ||
+ | .cards_axis { | ||
+ | position: relative; | ||
+ | content: ""; | ||
+ | display: block; | ||
+ | padding-top: 100%; | ||
} | } | ||
.cards__axis:before { | .cards__axis:before { | ||
Line 414: | Line 423: | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
− | + | margin: 0; | |
-webkit-transition: 0.5s ease-in-out; | -webkit-transition: 0.5s ease-in-out; | ||
-moz-transition: 0.5s ease-in-out; | -moz-transition: 0.5s ease-in-out; | ||
Line 434: | Line 443: | ||
transform: perspective(1000px) rotateY(0deg); | transform: perspective(1000px) rotateY(0deg); | ||
} | } | ||
+ | |||
+ | .cards_front { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | margin: 0; | ||
+ | -webkit-transition: 0.5s ease-in-out; | ||
+ | -moz-transition: 0.5s ease-in-out; | ||
+ | -ms-transition: 0.5s ease-in-out; | ||
+ | -o-transition: 0.5s ease-in-out; | ||
+ | transition: 0.5s ease-in-out; | ||
+ | |||
+ | -webkit-backface-visibility: hidden; | ||
+ | -moz-backface-visibility: hidden; | ||
+ | -ms-backface-visibility: hidden; | ||
+ | -o-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | |||
+ | -webkit-transform: perspective(700px) rotateY(0deg); | ||
+ | -moz-transform: perspective(1000px) rotateY(0deg); | ||
+ | -ms-transform: perspective(1000px) rotateY(0deg); | ||
+ | -o-transform: perspective(1000px) rotateY(0deg); | ||
+ | transform: perspective(1000px) rotateY(0deg); | ||
+ | } | ||
+ | |||
.cards__axis:hover .cards__front { | .cards__axis:hover .cards__front { | ||
-webkit-transform: perspective(700px) rotateY(-180deg); | -webkit-transform: perspective(700px) rotateY(-180deg); |
Revision as of 18:05, 17 October 2017
Our Advisors