Tutorial Cbox Circle

¡Hola mis panditas!(? Hoy traigo un tutorial súper kawaiioso, es el primero que hago (*^,^)
es para poner la chat box en un circulito que pasamos el cursor y se gira y se muestra el cbox, y bueno, lo unico que debes haser es pegar el siguiente codigo en un gadget HTML javascrip y editarlo a tu gusto:
<center><div style="border-radius:100%;padding:5px;"><div id="HCC2-container"><div id="HCCircle"><div class="mmC3"><br /><br /><br /><br /><center>EL CÓDIGO DE LA C-BOX</center></div><div class="mmC1"><img src="http://i.imgur.com/0zxqmqQ.png" style="width: 200px; height: 200px; border-radius:100%;" /></div></div></div></div></center><style>#HCCircle {-webkit-transform-style: preserve-3d;-webkit-perspective: 1000;width: 200px;height: 200px;border-radius:33333px;background: #eee; /* FONDO CIRCLE ESTATICO */position: relative;border: 1px dashed #000; /* BORDER CIRCLE ESTATICO */} .HCC3, .HCC1 {position: absolute;-webkit-backface-visibility: hidden;-webkit-transition: -webkit-transform 0.4s ease-in;width: 100%;height: 100%;font-family: calibri; /* ESTILO DE LETRA MENSAJE */color: #000; /* COLOR DE LETRA MENSAJE */font-size: 9px; /* TAMAÑO DE LETRA MENSAJE */border-radius:3333px;}.HCC3 {-webkit-transform: rotateY(180deg);background: #FFFFFF url(http://i.imgur.com/ym7dORi.png);overflow: hidden; } .HCC1 {background: #fff;}#HCC2-container {display: inline-block;text-align: justify;} #HCC2-container:hover .mmC3 {-webkit-transform: rotateY(0deg);}#HCC2-container:hover .mmC1 {-webkit-transform: rotateY(-180deg);}}</style>

Editamos lo marcado en rojito y les quedó una cbox en un "circle rotate effect" haha.
Bye bye!