here is my code which seems ok but nothing happen in the css windows and in the control one. the only thing is that the text is written in an other way when i pass on it.
can someone tell me what i've done wrong.
Thanks
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
background: repeating-linear-gradient(
$direction,
$stripe-background,
$stripe-background ($width-percent - 1),
$stripe-color 1%,
$stripe-background $width-percent
);
}
@mixin transform($transformation) {
transform: $transformation;
-webkit-transform: $transformation;
-moz-transform: $transformation;
-ms-transform: $transformation;
-o-transform: $transformation;
}
@mixin photo-content {
object-fit: cover;
}
@mixin backface-visibility($visibility: hidden) {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
}
.notecard {&:hover{
@include transform (rotatey(-180deg));
}
width: 300px;
height: 180px;
border: 1px solid black;
display: inline-block;
margin: 20px;
font-family: Roboto, sans-serif;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
.front, .back {
width: 100%;
height: 100%;
position: absolute;
@include backface-visibility;
}
.front {
z-index: 3;
font-size: 20px;}
.word {
display: block;
text-align: center;
position: relative;
top: 40%;
}
}
.back {
z-index: 1;
word-wrap: break-word;
line-height: 1.6;
.definition {
width: 100%;
height: 100%;
.photo {
width: 60%;
margin: 0px auto;
}
}
}
}