I'm working on a clients team-page. The idea was to show more info (name, profession, etc) after clicking on the image. I got it working with a nice flip-animation. Some browsers (ie8, ie9, ie10) don't animate and just make a simple swap, no problemo. But! IE11 is a creating a problem. The animation seems to work but the back side of the card is not displayed.
I've seen earlier questions like:
- CSS3 - 3D Flip Animation - IE10 transform-origin: preserve-3d workaround
- backside-visibility not working in IE10 - works fine in webkit
But that's IE10 and I'm not the best js/css developer around so don't understand the answers.
Demo can be found here: http://72dpi.nl/klanten/makelaarsland/team/
Code can by found on CodePen: http://codepen.io/jeffreylauwers/pen/HfIFw
HTML:
<div class="fake-wrapper"><!-- This 'fake-wrapper' can be deleted -->
<div class="people">
<div id="block1" class="block" onclick="changeClass('block1')">
<div class="front side">
<img src="img/img_roos-van-schaaijk.jpg" alt="Roos van Schaaijk"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
<div id="block2" class="block" onclick="changeClass('block2')">
<div class="front side">
<img src="img/img_stijn-van-tol.jpg" alt="Stijn van Tol"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
<div id="block3" class="block" onclick="changeClass('block3')">
<div class="front side">
<img src="img/img_roos-van-schaaijk.jpg" alt="Roos van Schaaijk"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
<div id="block4" class="block" onclick="changeClass('block4')">
<div class="front side">
<img src="img/img_stijn-van-tol.jpg" alt="Stijn van Tol"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
<div id="block5" class="block" onclick="changeClass('block5')">
<div class="front side">
<img src="img/img_roos-van-schaaijk.jpg" alt="Roos van Schaaijk"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
<div id="block6" class="block" onclick="changeClass('block6')">
<div class="front side">
<img src="img/img_stijn-van-tol.jpg" alt="Stijn van Tol"/>
</div>
<div class="back side">
<div class="table">
<div class="table-cell">
<b>Rianne van der Tuin</b>
<span>Juridisch medewerker</span>
<p>Als hij maandags aan de telefoon wat schor klinkt, kan dat komen door de AZ wedstrijd van het weekend ervoor.</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
/*------------------------------------*\
The Stylesheet for 'Team'
\*------------------------------------*/
/* START: This 'fake-wrapper' can be deleted */
.fake-wrapper{
max-width: 100%;
padding: 0 15px;
}
@media only screen and (min-width:51.2em) {
.fake-wrapper {
width: 646px;
}
}
/* END: This 'fake-wrapper' can be deleted */
.people{
margin: 30px 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.block {
float: left;
position: relative;
width: 33.333%;
padding-bottom : 33.333%; /* = width for a 1:1 aspect ratio */
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
transition: 0.7s;
}
@media only screen and (max-width:32em) {
.block {
width: 100%;
padding-bottom: 100%;
}
}
.rotated{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.block .front{
z-index: 50;
}
.block .back{
z-index: 10;
}
.rotated .back{
z-index: 99;
}
.side{
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
cursor: pointer;
}
/* FRONT */
.front{
background-color: #f8f8f8;
width: 100%;
}
.front img {
display: block;
width: 100%;
height: auto;
}
.front:hover{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
/* BACK */
.back{
position: absolute;
height: 80%; /* = 100% - 2*10% padding */
width: 90%; /* = 100% - 2*5% padding */
padding: 10% 5%;
text-align: center;
color: #fff;
background-color: #0d3789;
-webkit-transform: perspective(1000px) rotateY(180deg);
-moz-transform: perspective(1000px) rotateY(180deg);
transform: perspective(1000px) rotateY(180deg);
}
.back b{
display: block;
}
.back span{
display: block;
font-size: 0.7333em;
margin-bottom: 10px;
}
.back p{
font-size: 0.7333em;
line-height: 1.5em;
}
@media only screen and (max-width:32em) {
.back b{
font-size: 1.2em;
}
.back span{
font-size: 1em;
}
.back p{
font-size: 1em;
line-height: 1.5em;
}
}
.table{
display: table;
height: 100%;
width: 100%;
}
.table-cell{
display: table-cell;
vertical-align: middle;
height: 100%;
width: 100%;
}
JS:
function changeClass(visual){
if(document.getElementById(visual).className == "block")
document.getElementById(visual).className += " rotated";
else
document.getElementById(visual).className = "block";
}
Hope you can help me out.
Kind regards, Jeffrey
