Last active
January 27, 2018 13:49
-
-
Save gmocamilotd/4ac85fec00f5bc97393b29379f60092c to your computer and use it in GitHub Desktop.
inspirado en https://codepen.io/declanelcocks/pen/ZbEPWM
y en https://codepen.io/nyvinman/pen/rzBLRR
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body, html { | |
height: 100%; | |
} | |
body { | |
background: #252527; | |
font-family: "Open Sans", sans-serif; | |
padding: 1rem; | |
} | |
.row { | |
margin-bottom: 1rem; | |
} | |
/* Aspect Ratio | |
----------------------*/ | |
.one-one { | |
position: relative; | |
} | |
.one-one:before { | |
display: block; | |
content: " "; | |
width: 100%; | |
padding-top: 410px; | |
/* en vez de 410px, puedes usar 56.25% | |
para que cada loceta tenga la proporcion | |
de 16:9 | |
Ratio of 16:9 (16w:9h) | |
* (h / w) * 100 = % | |
* (9 / 16) * 100 = % | |
* 0.5625 * 100 = 56.25% | |
* 1:1 = 100% | |
*/ | |
} | |
/* Flippers | |
----------------------*/ | |
/* Container */ | |
.tile-content { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
transition: 0.6s; | |
transform-style: preserve-3d; | |
/* Optional animation */ | |
animation: flip 12s infinite; | |
} | |
/* Optional animation */ | |
.row:nth-child(odd) .col-xs-4:nth-child(even) .content { | |
animation-delay: 5s; | |
} | |
/* Optional animation */ | |
.row:nth-child(even) .col-xs-4:nth-child(odd) .content { | |
animation-delay: 5s; | |
} | |
.tile-content:hover { | |
transform: rotateY(180deg); | |
} | |
/* Faces */ | |
.tile-front, | |
.tile-back { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
transform: translate(-50%, -50%); | |
backface-visibility: hidden; | |
} | |
.tile-front { | |
background-color: tomato; | |
z-index: 2; | |
transform: rotateY(0deg); | |
} | |
.tile-back { | |
background-color: skyblue; | |
transform: rotateY(-180deg); | |
} | |
/* Flipper Content | |
----------------------*/ | |
.tile-back-1 { | |
background-image: url("https://www.sarasoueidan.com/demos/windows8-animations/images/blue.jpg"); | |
background-size: cover; | |
} | |
span { | |
font-weight: bold; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
color: black; | |
z-index:10; | |
} | |
/* Optional Animation | |
----------------------*/ | |
@keyframes flip { | |
0% { | |
transform: rotateY(0deg); | |
} | |
40% { | |
transform: rotateY(0deg); | |
} | |
50% { | |
transform: rotateY(-180deg); | |
} | |
90% { | |
transform: rotateY(-180deg); | |
} | |
100% { | |
transform: rotateY(0deg); | |
} | |
} | |
/****************************************** | |
Animate.CSS By Dan Eden | |
******************************************/ | |
.animatedgroup{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;} | |
@-webkit-keyframes flipInX { | |
0% { | |
-webkit-transform: perspective(400px) rotateX(90deg); | |
opacity: 0; | |
} | |
40% { | |
-webkit-transform: perspective(400px) rotateX(-10deg); | |
} | |
70% { | |
-webkit-transform: perspective(400px) rotateX(10deg); | |
} | |
100% { | |
-webkit-transform: perspective(400px) rotateX(0deg); | |
opacity: 1; | |
} | |
} | |
@-moz-keyframes flipInX { | |
0% { | |
-moz-transform: perspective(400px) rotateX(90deg); | |
opacity: 0; | |
} | |
40% { | |
-moz-transform: perspective(400px) rotateX(-10deg); | |
} | |
70% { | |
-moz-transform: perspective(400px) rotateX(10deg); | |
} | |
100% { | |
-moz-transform: perspective(400px) rotateX(0deg); | |
opacity: 1; | |
} | |
} | |
@-o-keyframes flipInX { | |
0% { | |
-o-transform: perspective(400px) rotateX(90deg); | |
opacity: 0; | |
} | |
40% { | |
-o-transform: perspective(400px) rotateX(-10deg); | |
} | |
70% { | |
-o-transform: perspective(400px) rotateX(10deg); | |
} | |
100% { | |
-o-transform: perspective(400px) rotateX(0deg); | |
opacity: 1; | |
} | |
} | |
@keyframes flipInX { | |
0% { | |
transform: perspective(400px) rotateX(90deg); | |
opacity: 0; | |
} | |
40% { | |
transform: perspective(400px) rotateX(-10deg); | |
} | |
70% { | |
transform: perspective(400px) rotateX(10deg); | |
} | |
100% { | |
transform: perspective(400px) rotateX(0deg); | |
opacity: 1; | |
} | |
} | |
.flipInX { | |
-webkit-backface-visibility: visible !important; | |
-webkit-animation-name: flipInX; | |
-moz-backface-visibility: visible !important; | |
-moz-animation-name: flipInX; | |
-o-backface-visibility: visible !important; | |
-o-animation-name: flipInX; | |
backface-visibility: visible !important; | |
animation-name: flipInX; | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="tiles-container" class="container"> | |
<div class="row"> | |
<div class="col-xs-8 animatedgroup flipInX"> | |
<div class="box one-one"> | |
<div class="tile-content"> | |
<div class="tile-front tile-back-1"> | |
<span>front</span> | |
</div> | |
<div class="tile-back"> | |
<span>back</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-4 animatedgroup flipInX"> | |
<div class="box one-one"> | |
<div class="tile-content"> | |
<div class="tile-front"> | |
<span>front</span> | |
</div> | |
<div class="tile-back"> | |
<span>back</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="col-xs-4 animatedgroup flipInX"> | |
<div class="box one-one"> | |
<div class="tile-content"> | |
<div class="tile-front"> | |
<span>front</span> | |
</div> | |
<div class="tile-back"> | |
<span>back</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="col-xs-8 animatedgroup flipInX"> | |
<div class="box one-one"> | |
<div class="tile-content"> | |
<div class="tile-front"> | |
<span>front</span> | |
</div> | |
<div class="tile-back"> | |
<span>back</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment