Speech bubble with rotation when mouse goes over it - html

Question

I'm in the process of playing with css a bit. Unfortunately, it doesn't look quite the way I'd like it to yet. The speech bubble should be smaller and directly above them. The other reason is the rotation when the mouse pointer goes over the speech bubble the complete speech bubble should rotate. Unfortunately, when you rotate it, everything else looks like a speech bubble....
How do I make the bubble smaller and put it over them and how do I make the rotation look better.
HTML
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
color: #fff;
}
.spinning:hover {
width: 100px;
height: 100px;
color: #fff;
background-color: #5869FF;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* transform: rotate(3deg); */
/* transform: rotate(0.3rad);/ */
/* transform: rotate(3grad); */
/* transform: rotate(.03turn); */
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 300px;
color: #fff;
background: #5869FF;
border-radius: 40px;
padding: 24px;
text-align: center;
color: #000;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 24px solid #5869FF;
border-right: 12px solid transparent;
border-top: 12px solid #5869FF;
border-bottom: 20px solid transparent;
left: 32px;
bottom: -24px;
}
.blue {
color: #5869FF;
}
.black {
color: #3B3B3B;
}
.text {
text-align: center;
display: flex;
margin-top: 35px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>
What I have
What I want

Answer 1

Try this, Instead of animation on .spinning div and animation on .spinner-text only
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
margin-left: 30px;
}
.spinning:hover .bubble .spinner-text {
background-color: #5869FF;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
/* transform: rotate(3deg); */
/* transform: rotate(0.3rad);/ */
/* transform: rotate(3grad); */
/* transform: rotate(.03turn); */
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 30px;
line-height: 28px;
width: 52px;
height: 52px;
color: #fff;
padding: 0;
text-align: center;
color: #000;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 14px solid #5869FF;
border-right: 12px solid transparent;
border-top: 12px solid #5869FF;
border-bottom: 20px solid transparent;
left: 15px;
bottom: -20px;
}
.bubble .spinner-text {
background: #5869FF;
border-radius: 40px;
padding: 12px;
border-radius: 40px;
}
.blue {
color: #5869FF;
}
.black {
color: #3B3B3B;
}
.text {
text-align: center;
display: flex;
margin-top: 20px;
font-weight: bold;
font-size: 20px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>

Answer 2

Here you have the solution which is coresponding with the screenshot of your requirements. I have modified Minals code to get a faster solution because he did really good job with fixing the rotate issue.
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
body {
padding: 50px;
font-family: 'Montserrat', sans-serif;
}
.spinner-text {
color: #fff;
font-size:20px;
font-weight:700;
width:40px;
}
.spinning {
margin-left: 115px;
}
.spinning:hover .bubble .spinner-text {
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.bubble .spinner-text {
background: transparent!important;
border-radius: 40px;
padding: 10px;
border-radius: 40px;
position:absolute;
left:-10px;
bottom:2px;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
.bubble {
position: relative;
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 0px;
height:0px;
background: #5869FF;
border-radius: 40px;
padding: 21px;
text-align: center;
color: #000;
top:14px;
}
.bubble-bottom-left:before {
content: "";
width: 10px;
height: 15px;
position: absolute;
background-color: #5869ff;
left: 5px;
bottom: -8px;
border-radius: 0px 0px 100px 0px;
transform: translate(0, -5px);
}
.blue {
color: #5869FF;
font-size:25px;
font-weight:600;
}
.black {
color: #3B3B3B;
font-size:25px;
font-weight:600;
}
.text {
text-align: center;
display: flex;
margin-top: 20px;
font-weight: bold;
font-size: 20px;
}
<div>
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>

Answer 3

You need to set a transform origin by transform-origin: 0% 0% to rotate element in center or what point you want to transform.
See JSFiddle Sample
body {
padding: 50px;
font-family: "Montserrat", sans-serif;
}
.spinner-text {
color: #fff;
}
.spinning {
color: #fff;
position: absolute;
bottom: 28px;
left: 80px;
width: 40px;
height: 40px;
}
.spinning:hover {
cursor: default;
color: #fff;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: 50% 50%;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#speechBubble {
display: block;
position: relative;
}
.bubble {
position: absolute;
font-family: sans-serif;
font-size: 18px;
line-height: 20px;
width: 20px;
height: 20px;
color: #fff;
background: #5869ff;
border-radius: 50%;
padding: 10px;
text-align: center;
}
.bubble-bottom-left:before {
content: "";
width: 6px;
height: 18px;
position: absolute;
background-color: #5869ff;
transform: rotate(35deg);
left: 15px;
bottom: -8px;
border-radius: 0px 0px 40px 0px;
}
.blue {
color: #5869ff;
}
.black {
color: #3b3b3b;
}
.text {
text-align: center;
display: flex;
margin-top: 35px;
font-weight: 600;
font-size: 20px;
}
/* EOS */
<div id="speechBubble">
<div class="spinning">
<div class="bubble bubble-bottom-left" contenteditable>
<div class="spinner-text">
:)
</div>
</div>
</div>
<div class="text">
<div class="blue">this</div>
<div class="black">is</div>
<div class="blue">name</div>
</div>
</div>