iwmlib/css/flipeffect.css

74 lines
1.1 KiB
CSS
Raw Permalink Normal View History

2019-05-22 16:02:17 +02:00
2019-07-05 08:43:23 +02:00
.flipWrapper {
2019-05-22 16:02:17 +02:00
position: absolute;
top: 0;
left: 0;
}
/* Fix to render
.flipWrapper > div:first-child{
z-index: 1;
} */
.flipCard {
position: absolute;
width: 100%;
height: 100%;
2019-07-05 08:43:23 +02:00
/*** See: https://stackoverflow.com/questions/7439042/css-js-to-prevent-dragging-of-ghost-image ***/
2019-05-22 16:02:17 +02:00
/* -webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
user-drag: none; */
}
2019-07-05 08:43:23 +02:00
.flipFace {
2019-05-22 16:02:17 +02:00
box-shadow: 2px 2px 10px #000;
visibility: hidden;
}
2019-07-05 08:43:23 +02:00
.front {
2019-05-22 16:02:17 +02:00
width: 100%;
height: 100%;
2019-07-05 08:43:23 +02:00
position: absolute;
background-color: #333;
2019-05-22 16:02:17 +02:00
}
2019-07-05 08:43:23 +02:00
.back {
background-color: #333;
position: absolute;
2019-05-22 16:02:17 +02:00
border: 8px solid white;
}
.closeBtn {
transform-origin: top right;
position: absolute;
width: 44px;
height: 44px;
padding: 4px;
2019-07-05 08:43:23 +02:00
right: 0;
top: 0;
2019-05-22 16:02:17 +02:00
}
.infoBtn {
transform-origin: bottom right;
position: fixed;
width: 44px;
height: 44px;
padding: 4px;
2019-07-05 08:43:23 +02:00
right: 0;
bottom: 0;
2019-05-22 16:02:17 +02:00
}
.backBtn {
transform-origin: bottom right;
position: fixed;
width: 44px;
height: 44px;
padding: 4px;
2019-07-05 08:43:23 +02:00
right: 0;
bottom: 0;
2019-05-22 16:02:17 +02:00
}