Good day! I have implemented this code to create a flip effect on the blocks of my website:
.tegels {
/*position:relative;*/
width:25.2%;
height:37.4%;
overflow:hidden;
float:left;
margin-top:3.5vw;
margin-bottom:0px;
margin-left:4.8%;
margin-right:2%;
list-style-type: none;
display:inline-block;
}
.tegels figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-3vw;
width:100%;
}
.tegels figure img {
display:block;
position:relative;
z-index:10;
margin-left:3vw;
width:100%;
height:100%;
}
.tegels figure figcaption {
display:block;
position:absolute;
z-index:5;
margin-left:3vw;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:100%;
}
.tegels figure h2 {
font-family:Garamond, Georgia, serif;
color:black;
font-size:2.1vw;
text-align:center;
margin-bottom:1vw;
}
.tegels figure p {
display:block;
font-family:Garamond, Georgia, serif;
font-size:1.5vw;
line-height:1.7vw;
margin:0;
color:#fff;
text-align:center;
}
.tegels figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:2vw 1vw;
background-color:rgba(204,204,204, 0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-ms-transform:all .01s;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.tegels figure:hover img,figure.hover img {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg);
transform:rotateY(90deg)
}
.tegels figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
I spent about 3 hours looking for a solution but unfortunately couldn't find one. Hence, I am reaching out to this amazing forum for help. Thank you for taking the time to read this message. You can visit my website at www.gester.nl. I attempted to target Internet Explorer specifically with some codes, but it didn't work on my version, so I'm unsure where the issue lies within my code.