Efecto Circle 1 + Aviso

   

Muyy buenas :D como están? espero que muy bien! yo cansada y estresada por los estudios D: apenas comienzo y ya es todo tarea, exámenes, exámenes y tareas ja! nunca paran -.- no tienen consideración con nosotros uvu pero bueno de que me quejo, de igual siempre termino haciendo todo y aveces se me pasan algunas cosas.

Y una cosita muy pero muy importante , en estas horas estaré agregando un nuevo gadget el cual se titulara horarios.. no creo que pueda publicar todos los días por esa razón decidí tomar esa pequeña decisión, si quieren saber mas sobre el tema dejen un comentario ~
o pueden volver un poquito mas tarde y ver los horarios , tambien pueden darme una recomendación de horarios o algún consejito de como organizarme, por la verdad que ahora mismo ni idea de nada haha!

Bueno ~ sin mas que decir comencemos con el tutorial, este efecto esta super bonito y pues es resultado de probar y jugar con codigos , capas que ya existe pero ni idea, ami me salio mientras probaba con un efecto para el blog
Si te interesa verlo click aqui para ver (x)

Si te gusto el efecto es muy pero muy facil, solo debes agregar el siguiente codigo donde quieras que este el efecto:

Recurda dar creditos a korean Suite

<style>.ch-item {
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
cursor: default;
}



.ch-info-wrap,

.ch-info{
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;


-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;


-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}



.ch-info-wrap {
top: 20px;
left: 20px;
background: #f9f9f9 url(../images/bg.jpg);
box-shadow:

0 0 0 20px rgba(255,255,255,0.2),

inset 0 0 3px rgba(115,114, 23, 0.8);


}



.ch-info {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}



.ch-info > div {
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background-position: center center;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}



.ch-info .ch-info-front {
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
transform-origin: 50% 100%;


z-index: 100;
box-shadow:

inset 2px 1px 4px rgba(0,0,0,0.1);
}



.ch-info .ch-info-back {
background: rgba(230,132,107,0);
}



.ch-img-1 {

background-image: url(http://24.media.tumblr.com/tumblr_mb4006VUGv1rbavh7o1_500.png);
}



.ch-item:hover .ch-info-front {
-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);


box-shadow:

inset 0 0 5px rgba(255,255,255,0.2),

inset 0 0 3px rgba(0,0,0,0.3);
}



.ch-item:hover .ch-info-back {
background:#F0ECE6;
}



.ch-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}



.ch-grid:after,
.ch-item:before {
content: '';
display: table;
}



.ch-grid:after {
clear: both;
}



.ch-grid li {
width: 320px;
height: 320px;
display: inline-block;
margin: 20px;
}



</style>



<ul class="ch-grid">
<li><div class="ch-item ch-img-1">
<div class="ch-info-wrap">
<div class="ch-info">
<div class="ch-info-front ch-img-1">
</div>
<div class="ch-info-back">
Escribe aqui
</div>
</div>
</div>
</div>
</li>
</ul>