How do I rotate a shape in CSS3 but not rotate the text inside the shape?

Question

Just getting started out in CSS3 and had a beginner question (first question on stackoverflow!). I've created four little shapes that rotate and change color when you hover over them. Inside each shape is a text box with a phrase like "About" or "Contact." How do I make it so that when I hover, the text box does not rotate but the shape around it does? I imagine I'll have to counter-rotate my span the same degrees as the shape rotates, but I'm having trouble doing this. I know the spacing is funny on the shapes, but I'm just setting this up as an exercise for myself. I'll address all the cosmetic things once I've figured out the rotation problem.

.burst-12 {
width: 80px;
height: 80px;
text-align: center;
position: absolute;
left:50px;
opacity: .8;
top:100px;
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 15 16 17 18px;
}

.burst-12:before, .burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: inherit;
}

.burst-12:before {
-webkit-transform: rotate(30deg);
   -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
     -o-transform: rotate(30deg);
border-radius: 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18 19 17 16px;
}

.burst-12:after {
-webkit-transform: rotate(60deg);
   -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
     -o-transform: rotate(60deg);
border-radius: 19px;
-moz-border-radius: 19px;
-webkit-border-radius: 19 10 11 16px;
}

.x1{
  background: #f64260;
}

.x2{
background: #f8605b;
left:123px;
-webkit-transform: rotate(15deg);
   -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
     -o-transform: rotate(15deg);
}

.x1:hover{
background-color:#94dbdd;
-webkit-transform: rotate(300deg);
   -moz-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
     -o-transform: rotate(300deg);
}

.x2:hover{
background-color:#4c6278;
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.x3 {
background-color: sandybrown;
left:190px;
-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
     -o-transform: rotate(10deg);
}

.x3:hover{
background-color:cornflowerblue;  
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.x4{
background-color: #f1ce4b;
left:260px;
-webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
    -ms-transform: rotate(10deg);
     -o-transform: rotate(10deg);
}

.x4:hover{
background-color:#305578;
-webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
}

.burst-12 span{
 display:block;
 position:absolute;
 z-index:2;
}

p:first-letter{
text-transform: uppercase;
}

p {
color: white;
font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times,     serif;
letter-spacing:0.1em;
text-align:center;
margin: 30px auto;
text-transform: lowercase;
line-height: 145%;
font-size: 14pt;
font-variant: small-caps;
border-style:solid;
border-width: 1px;
padding: 4px;
}

Here's my jfiddle: https://jsfiddle.net/mthrasher33/bdh8sybj/

Thanks!

Answer 1

You are correct, you can count-rotate the text:

.x1:hover span{
    -webkit-transform: rotate(-300deg);
       -moz-transform: rotate(-300deg);
        -ms-transform: rotate(-300deg);
         -o-transform: rotate(-300deg);
}

This is what that would look like: https://jsfiddle.net/bdh8sybj/1/

And if you want to keep the text in the same position, you can use CSS3 translate:

.x1:hover span{
    -webkit-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
       -moz-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
        -ms-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
         -o-transform: rotate(-300deg) translateY(-8px) translateX(-8px);
}

https://jsfiddle.net/bdh8sybj/2/