mirror of
https://github.com/ysoftdevs/pf2015.git
synced 2026-01-14 15:53:56 +01:00
114 lines
2.5 KiB
CSS
114 lines
2.5 KiB
CSS
flippy {
|
|
float: left;
|
|
-webkit-perspective: 600px;
|
|
-moz-perspective: 600px;
|
|
-ms-perspective: 600px;
|
|
perspective: 600px;
|
|
}
|
|
flippy-front {
|
|
position: absolute;
|
|
z-index: 900;
|
|
width: inherit;
|
|
height: inherit;
|
|
-webkit-transform: rotateX(0deg) rotateY(0deg);
|
|
-moz-transform: rotateX(0deg) rotateY(0deg);
|
|
-ms-transform: rotateX(0deg) rotateY(0deg);
|
|
transform: rotateX(0deg) rotateY(0deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-moz-transform-style: preserve-3d;
|
|
-ms-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
-ms-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
flippy-back {
|
|
position: absolute;
|
|
z-index: 800;
|
|
width: inherit;
|
|
height: inherit;
|
|
-webkit-transform: rotateY(-180deg);
|
|
-moz-transform: rotateY(-180deg);
|
|
-ms-transform: rotateY(-180deg);
|
|
transform: rotateY(-180deg);
|
|
-webkit-transform-style: preserve-3d;
|
|
-moz-transform-style: preserve-3d;
|
|
-ms-transform-style: preserve-3d;
|
|
transform-style: preserve-3d;
|
|
-webkit-backface-visibility: hidden;
|
|
-moz-backface-visibility: hidden;
|
|
-ms-backface-visibility: hidden;
|
|
backface-visibility: hidden;
|
|
}
|
|
flippy.flipped flippy-front {
|
|
z-index: 900;
|
|
-webkit-transform: rotateY(180deg);
|
|
-moz-transform: rotateY(180deg);
|
|
-ms-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
}
|
|
flippy.flipped flippy-back {
|
|
z-index: 1000;
|
|
-webkit-transform: rotateY(0deg);
|
|
-moz-transform: rotateY(0deg);
|
|
-ms-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
flippy.fancy {
|
|
float: left;
|
|
margin: 0 10px 10px 0;
|
|
position: relative;
|
|
font-size: .8em;
|
|
cursor: pointer;
|
|
width: 250px;
|
|
height: 250px;
|
|
}
|
|
flippy.fancy img {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
flippy.fancy flippy-front {
|
|
float: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 900;
|
|
width: inherit;
|
|
height: inherit;
|
|
border: 1px solid #ccc;
|
|
background: white;
|
|
text-align: center;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
|
|
}
|
|
flippy.fancy flippy-front.flipped {
|
|
border-color: #eee;
|
|
/*background: #333;*/
|
|
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
|
|
}
|
|
flippy.fancy flippy-back {
|
|
float: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 800;
|
|
width: inherit;
|
|
height: inherit;
|
|
border: 1px solid #ccc;
|
|
background: white;
|
|
text-align: center;
|
|
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
|
|
}
|
|
flippy.fancy flippy-back.flipped {
|
|
/*background: #80868d;*/
|
|
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|