Sha256: 64e9fe32073c91baebbee8ce9d174ae72931fb8b73f32eba161bd30a515018ae
Contents?: true
Size: 1.83 KB
Versions: 11
Compression:
Stored size: 1.83 KB
Contents
@keyframes rotating {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
@keyframes backrotating {
from { transform: rotateY(-180deg); }
to { transform: rotateY(180deg); }
}
// http://davidwalsh.name/css-flip
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
margin: 0 auto;
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
// border-radius: 100px;
padding: 20px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
border: solid 1px #ccc;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
background: #fff;
&.bg {
background-size: cover;
background-image: image-url("magic/bgs/rain-flower.jpg");
}
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
background: #ccc;
&.bg {
background-size: cover;
background-image: image-url("magic/bgs/seucide.jpg");
}
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
$rotationSpeed: 1.2s;
.flip-container.infinite .front { animation: rotating $rotationSpeed linear infinite; }
.flip-container.infinite .back { animation: backrotating $rotationSpeed linear infinite; }
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
Version data entries
11 entries across 11 versions & 1 rubygems