■

回転の注意 CSS3

例えばこんな感じに360度回転をするアニメーションがあるとする

@-webkit-keyframes kaiten-anim {
    0% {
        -webkit-transform: translate3d(-11.5px, -27px, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: linear;
    }

    100% {
        -webkit-transform: translate3d(-11.5px, -27px, 0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: linear;
    }
}

・0%のときにどうせ回転はX,Y,Zは0だからといってこのよう↓に省略するとダメ！

@-webkit-keyframes kaiten-anim {
    0% {
        -webkit-transform: translate3d(-11.5px, -27px, 0) scale3d(1, 1, 1);
        -webkit-animation-timing-function: linear;
    }

    100% {
        -webkit-transform: translate3d(-11.5px, -27px, 0) rotateX(0deg) rotateY(0deg) rotateZ(360deg) scale3d(1, 1, 1);
        -webkit-animation-timing-function: linear;
    }
}