Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 23, 2013 07:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/5633297 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/5633297 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Marco Barría. Carta - concepto - CSS3 - jQuery / backface and transition / Mejora de concepto http://codepen.io/fixcl/pen/LdKhq
Raw
index.html
<div id="perspectiva">
<div id="contenedor">
<div class="cara frontal">
<h1>Codepen</h1>
</div>
<div class="cara trasera">
<div id="abrir"></div>
<div id="partes"></div>
<div id="carta">
<i class="icon-cancel"></i>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30.312px" height="35px" viewBox="0 0 30.312 35" enable-background="new 0 0 30.312 35" xml:space="preserve">
<g>
<polygon fill="#E5332A" points="30.312,0 20.208,0 15.156,8.75 20.207,17.5 "/>
<polygon fill="#8E1315" points="0,0 10.104,0 20.207,17.5 10.104,17.5 "/>
<polygon fill="#8E1315" points="0,35 10.104,35 15.156,26.25 10.104,17.5 "/>
<polygon fill="#E5332A" points="30.312,35 20.208,35 10.104,17.5 20.207,17.5 "/>
</g>
</svg>
<p>AUTOR: MARCO BARRÍA / DISEÑADOR</p>
<p>
DISEÑO WEB - FRONT-END<br>
Soy un auto marginado de Flash, ahora pregono el Html5, Css3 y Javascrit.<br>
</p>
</div>
</div>
</div><!-- fin contenedor -->
</div>
Raw
script.js
$(function(){
var $contenedor = $('#contenedor'),
$abrir = $('#abrir'),
$carta = $('#carta'),
$cara = $('.cara').find('h1'),
$icon = $('.icon-cancel'),
$pers = $('#perspectiva');
setTimeout(function(){
abrir();
}, 1500);
$cara.on('click', function(e){
e.preventDefault();
abrir();
});
$icon.on('click', function(e){
e.preventDefault();
cerrar();
});
function abrir() {
$contenedor.removeClass('rotar_').addClass('rotar');
$abrir.removeClass('tapa_').addClass('tapa');
$carta.removeClass('bajarTop_').addClass('bajarTop');
$pers.removeClass('subirTop_').addClass('subirTop');
}
function cerrar() {
$contenedor.removeClass('rotar').addClass('rotar_');
$abrir.removeClass('tapa').addClass('tapa_');
$carta.removeClass('bajarTop').addClass('bajarTop_');
$pers.removeClass('subirTop').addClass('subirTop_');
}
});
Raw
style.css
::selection
{
background: hsla(0,84%,33%,1);
color: #fff;
text-shadow:none;
}
::-moz-selection
{
background: hsla(0,84%,33%,1);
color: #fff;
text-shadow:none;
}
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
overflow: hidden;
}
body{
background: #8c8c8c;
background: -moz-radial-gradient(center, ellipse cover, #8c8c8c 0%, #2b2b2b 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#8c8c8c), color-stop(100%,#2b2b2b));
background: -webkit-radial-gradient(center, ellipse cover, #8c8c8c 0%,#2b2b2b 100%);
background: -o-radial-gradient(center, ellipse cover, #8c8c8c 0%,#2b2b2b 100%);
background: -ms-radial-gradient(center, ellipse cover, #8c8c8c 0%,#2b2b2b 100%);
background: radial-gradient(ellipse at center, #8c8c8c 0%,#2b2b2b 100%);
-webkit-font-smoothing: antialiased;
font-family: 'Titillium Web', sans-serif;
}
#perspectiva{
position:absolute;
top:150px;
left:50%;
margin-left: -200px;
-webkit-perspective:800;
-moz-perspective:800;
-o-perspective:800;
-ms-perspective:800;
perspective:800;
}
#contenedor{
border-radius: 5px;
width: 400px;
height: 280px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.cara{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
-o-backface-visibility:hidden;
-ms-backface-visibility:hidden;
backface-visibility:hidden;
}
.cara h1{
cursor: pointer;
color: hsla(0,0%,20%,1);
text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
font-family: 'Bad Script', cursive;
font-size: 1em;
text-align: center;
margin-top: 110px;
}
.frontal{
background: -webkit-linear-gradient(top, hsla(54,4%,85%,1) 0%,hsla(54,0%,96%,1) 50%,hsla(54,4%,80%,1) 100%);
z-index: 20;
}
.trasera{
background: -webkit-linear-gradient(top, hsla(54,0%,96%,1) 0%, hsla(54,0%,56%,1) 100%);
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
-o-transform:rotateY(-180deg);
-ms-transform:rotateY(-180deg);
transform:rotateY(-180deg);
}
#abrir{
position: absolute;
top:0;
left:0;
height: 0;
width: 80px;
border-top: 175px solid hsla(0,0%,85%,1);
border-left: 160px solid transparent;
border-right: 160px solid transparent;
-webkit-transform-origin:center top;
-moz-transform-origin:center top;
-o-transform-origin:center top;
-ms-transform-origin:center top;
transform-origin:center top;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 10;
}
#partes{
position: absolute;
top:0px;
left:0px;
width: 0;
height: 0;
border-left: 200px solid hsla(0,0%,90%,1);
border-top: 140px solid transparent;
border-bottom: 140px solid transparent;
z-index: 5;
}
#partes:after{
content: "";
position: absolute;
bottom:-140px;
left:-200px;
height: 0;
width: 80px;
border-bottom: 175px solid hsla(0,0%,95%,1);
border-left: 160px solid transparent;
border-right: 160px solid transparent;
}
#partes:before{
content: "";
position: absolute;
top:-140px;
right:-200px;
width: 0;
height: 0;
border-right: 200px solid hsla(0,0%,90%,1);
border-top: 140px solid transparent;
border-bottom: 140px solid transparent;
}
#carta{
background: url(http://fix.cl/test/carta/img/concrete_wall_3.png) repeat;
box-shadow: 0px 2px 5px hsla(0,0%,10%,1);
border-radius: 5px;
position: absolute;
top:3px;
left:0;
margin: 0 0 0 5px;
width: 390px;
height: 260px;
overflow: hidden;
z-index: 1;
}
#carta p:first-of-type{
color: hsla(0,0%,20%,1);
text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
text-align: center;
font-size: 0.8em;
margin-bottom: 45px;
}
#carta p:last-of-type{
color: hsla(0,0%,20%,1);
text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
font-size: 0.75em;
line-height:1.45em;
margin: 0 40px;
}
.icon-cancel{
cursor: pointer;
color: hsla(0,0%,70%,1);
font-size: 0.8em;
float: right;
text-align: center;
text-shadow: 0px 1px 1px hsla(0,0%,100%,1);
margin: 5px;
}
.icon-cancel:hover, .cara h1:hover{
color: hsla(0,84%,33%,1);
}
svg{
margin: 30px 0 10px 180px;
}
/******************************************************* animación */
.rotar,
.tapa,
.rotar_,
.tapa_,
.bajarTop,
.subirTop{
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.bajarTop_,
.subirTop_{
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.rotar_,
.bajarTop,
.subirTop{
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
-ms-transition-delay: 1s;
transition-delay: 1s;
}
.tapa,
.tapa_{
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.rotar{
-webkit-transform: rotate3d(0,1,0,180deg);
-moz-transform: rotate3d(0,1,0,180deg);
-o-transform: rotate3d(0,1,0,180deg);
-ms-transform: rotate3d(0,1,0,180deg);
transform: rotate3d(0,1,0,180deg);
}
.tapa{
-webkit-transform: rotate3d(1,0,0,180deg);
-moz-transform: rotate3d(1,0,0,180deg);
-o-transform: rotate3d(1,0,0,180deg);
-ms-transform: rotate3d(1,0,0,180deg);
transform: rotate3d(1,0,0,180deg);
z-index: 0 !important;
}
.rotar_{
-webkit-transform: rotate3d(0,1,0,0deg);
-moz-transform: rotate3d(0,1,0,0deg);
-o-transform: rotate3d(0,1,0,0deg);
-ms-transform: rotate3d(0,1,0,0deg);
transform: rotate3d(0,1,0,0deg);
}
.tapa_{
-webkit-transform: rotate3d(1,0,0,0deg);
-moz-transform: rotate3d(1,0,0,0deg);
-o-transform: rotate3d(1,0,0,0deg);
-ms-transform: rotate3d(1,0,0,0deg);
transform: rotate3d(1,0,0,0deg);
z-index: 10 !important;
}
.bajarTop{
-webkit-transform: translateY(-600px);
-moz-transform: translateY(-600px);
-o-transform: translateY(-600px);
-ms-transform: translateY(-600px);
transform: translateY(-600px);
}
.subirTop{
-webkit-transform: translateY(500px);
-moz-transform: translateY(500px);
-o-transform: translateY(500px);
-ms-transform: translateY(500px);
transform: translateY(500px);
}
.bajarTop_,
.subirTop_{
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment