I really hope I'm missing something simple here, because this is driving me crazy.

I'd like the element to rotateZ(360deg) when the class is applied, then back when the class is removed. For some reason, none of the transitions are happening. Any ideas?

**CSS**

```
#img-cover {
    content: url(../img/menu-center-plus.svg);
    border-radius: 66px;
    position:absolute;
    left:95px;
    top:95px;
    z-index: 1500;
    display:block;
    -webkit-transition: box-shadow 0.5s, opacity 1.2s, -webkit-transform 1s;
    -webkit-box-shadow: 0px 0px 2px 1px rgba(55, 55, 55, 0.6);
    -webkit-transform: rotateZ(-360deg);
    opacity: 0;
}

.twirlIn {
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    opacity: 1!important;
    -webkit-transform: rotateZ(360deg);
}

```