github-mirrors/pf2015
1
0
Fork 0
mirror of https://github.com/ysoftdevs/pf2015.git synced 2026-01-17 00:57:22 +01:00
Code Issues 1 Packages Projects Releases Wiki Activity

Use angluar-flippy to flip cards

Browse Source
This commit is contained in:
Juraj Michalek
2014-12-25 14:33:43 +00:00
parent 4dd6fa8c36
commit 7609ffdfd3
6 changed files with 203 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
css/flippy.css Normal file
View File

@@ -0,0 +1,113 @@
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);
}

10
css/pexeso.css
View File

@@ -24,6 +24,7 @@
color: #996633;
cursor: pointer;
}
.buttonStyle:active {
border: thin solid #99CC00;
background-color: #F5FFD2;
@@ -32,8 +33,11 @@
}
.card {
width: 10em;
height: 10em;
width: 5em;
height: 5em;
margin: 0.2em;
float: left;
cursor: pointer;
}
.solved {
@@ -54,5 +58,5 @@
.mystery {
background: blue;
color: blue;
}