SCSS à CSS
.hover-fold{
background: $yellow;
border: 5px white solid;
height: 310px;
margin: 10px auto;
@include perspective( 1500 );
position: relative;
width: 410px;
h2{
border-bottom: 1px solid #333;
margin: 0 40px;
padding: 110px 0 2px;
}
.top{
height: 50%;
@include transition(all .5s ease-out);
@include transform( rotateX(0deg) );
@include transform-origin( 0, 100% );
@include transform-style( preserve-3d );
position: absolute;
top:0px;
width: 100%;
z-index: 10;
.face{
@include backface-visibility( hidden );
position: absolute;
}
}
&:hover .top{
@include transform( rotateX(-180deg) );
}
.front{
background: url(https://dribbble.s3.amazonaws.com/users/21389/screenshots/963288/2ormore_shirt.png);
height: 100%; /*has to be 100% of .top */
width: 100%;
}
.back{
background: $yellow;
height: 100%; /*has to be 100% of .top */
padding: 0 40px;
@include transform( rotateX(180deg) );
width: 100%;
p{
margin: 0;
}
}
.bottom{
background: url(https://dribbble.s3.amazonaws.com/users/21389/screenshots/963288/2ormore_shirt.png) bottom;
height: 50%;
position: absolute;
top: 50%;
width: 100%;
z-index: 0;
}
}
tah didier
