transformプロパティの使い方（translate、rotate、scale）

CSSで要素を変形させる際にはtranformプロパティを利用します。

以前から利用できることは知っていましたが、少し齧ったことがある程度だったので、この機会によく利用する設定をまとめておきます。

◆横方向

.check-translate-01{
    width:200px;
    height:50px;
    background-color:limegreen;
    animation: translate-x 3s linear infinite;
}
@keyframes translate-x{
    0%{transform:translateX(0px);}
    50%{transform:translateX(100px);}
    100%{transform:translateX(0px);}
}

◆縦方向

.check-translate-02{
    width:200px;
    height:50px;
    background-color:limegreen;
    animation: translate-y 3s linear infinite;
}
@keyframes translate-y{
    0%{transform:translateY(0px);}
    50%{transform:translateY(50px);}
    100%{transform:translateY(0px);}
}

◆X軸

.check-rotate-01{
    width:200px;
    height:50px;
    background-color:limegreen;
    animation: rotate-x 3s linear infinite;
}
@keyframes rotate-x{
    0%{transform:rotateX(0deg);}
    100%{transform:rotateX(360deg);}
}

◆Y軸

.check-rotate-02{
    width:200px;
    height:50px;
    background-color:limegreen;
    animation: rotate-y 3s linear infinite;
}
@keyframes rotate-y{
    0%{transform:rotateY(0deg);}
    100%{transform:rotateY(360deg);}
}

◆Z軸

.check-rotate-03{
    width:200px;
    height:50px;
    background-color:limegreen;
    animation: rotate-z 3s linear infinite;
}
@keyframes rotate-z{
    0%{transform:rotateZ(0deg);}
    100%{transform:rotateZ(360deg);}
}

.check-scale-01{
    width:100px;
    height:100px;
    background-color:limegreen;
    animation: scale-xy 3s linear infinite;
}
@keyframes scale-xy{
    0%{transform:scale(1.0, 1.0);}
    50%{transform:scale(2.0, 2.0);}
    100%{transform:scale(1.0, 1.0);}
}

.check-multi-01{
    width:100px;
    height:100px;
    background-color:limegreen;
    animation: multi01 3s linear infinite;
}
@keyframes multi01{
    0%{transform:scale(1.0) rotateZ(0deg);}
    50%{transform:scale(2.0) rotateZ(180deg);}
    100%{transform:scale(1.0) rotateZ(360deg);}
}

複数の条件を指定する場合はスペースで区切ります。

• transform－CSS3リファレンス