CSS transformのチートシートを作りました。【translate,rotate,scale,skewの使い方】

CSS transformのチートシートを作りました。
demo

CSS transformのチートシートを作りました。

transformの一覧表のようなものがなかったので作りました。

書き方を忘れがちなのでぜひコピペして使ってください。

この４つを記載しています。

translate…移動
rotate…回転
scale…拡大・縮小
skew…傾ける

demo

translate（移動）

translateは要素を移動します。

translate…縦横に移動する

/*translate*/
.box1 {
    transition-duration: 1s;
}
.box1:hover {
    transform:translate(100px,100px);
}

/*translate*/

.box1 {

transition-duration: 1s;

}

.box1:hover {

transform:translate(100px,100px);

}

カーソルを
合わせる

translateX…横に移動する

/*translateX*/
.box2 {
    transition-duration: 1s;
}
.box2:hover { 
    transform:translateX(100px); 
}

/*translateX*/

.box2 {

transition-duration: 1s;

}

.box2:hover {

transform:translateX(100px);

}

カーソルを
合わせる

translateY…縦に移動する

/*translateY*/
.box3 {
    transition-duration: 1s;
}
.box3:hover { 
    transform:translateY(100px);
}

/*translateY*/

.box3 {

transition-duration: 1s;

}

.box3:hover {

transform:translateY(100px);

}

カーソルを
合わせる

translateZ

/*translateZ*/
.box4 {
    transition-duration: 1s;
}
.box4:hover { 
    transform:perspective(500px)translateZ(100px);
}

/*translateZ*/

.box4 {

transition-duration: 1s;

}

.box4:hover {

transform:perspective(500px)translateZ(100px);

}

カーソルを
合わせる

rotate（回転）

rotateは要素を回転させます。

rotate…中心を軸に回転

/*rotate*/
.box5 {
    transition-duration: 1s;
}
.box5:hover { 
    transform:rotate(180deg);
}

/*rotate*/

.box5 {

transition-duration: 1s;

}

.box5:hover {

transform:rotate(180deg);

}

カーソルを
合わせる

rotateX…横軸を中心に回転

/*rotateX*/
.box6 {
    transition-duration: 1s;
}
.box6:hover { 
    transform:rotateX(180deg);
}

/*rotateX*/

.box6 {

transition-duration: 1s;

}

.box6:hover {

transform:rotateX(180deg);

}

カーソルを
合わせる

rotateY…縦軸を中心に回転

/*rotateY*/
.box7 {
    transition-duration: 1s;
}
.box7:hover { 
    transform:rotateY(180deg);
}

/*rotateY*/

.box7 {

transition-duration: 1s;

}

.box7:hover {

transform:rotateY(180deg);

}

カーソルを
合わせる

rotateZ…中心を軸に回転(rotateと同じ)

/*rotateZ*/
.box8 {
    transition-duration: 1s;
}
.box8:hover { 
    transform:rotateZ(180deg);
}

/*rotateZ*/

.box8 {

transition-duration: 1s;

}

.box8:hover {

transform:rotateZ(180deg);

}

カーソルを
合わせる

scale（拡大・縮小）

scaleは要素を拡大・縮小させます。

scale…上下左右に拡大・縮小

/*scale*/
.box9 {
    transition-duration: 1s;
}
.box9:hover { 
    transform:scale(1.5,1.5);
}

/*scale*/

.box9 {

transition-duration: 1s;

}

.box9:hover {

transform:scale(1.5,1.5);

}

カーソルを
合わせる

scaleX…横に拡大・縮小

/*scaleX*/
.box10 {
    transition-duration: 1s;
}
.box10:hover { 
    transform:scaleX(1.5);
}

/*scaleX*/

.box10 {

transition-duration: 1s;

}

.box10:hover {

transform:scaleX(1.5);

}

カーソルを
合わせる

scaleY…縦に拡大・縮小

/*scaleY*/
.box11 {
    transition-duration: 1s;
}
.box11:hover { 
    transform:scaleY(1.5);
}

/*scaleY*/

.box11 {

transition-duration: 1s;

}

.box11:hover {

transform:scaleY(1.5);

}

カーソルを
合わせる

scaleZ

/*scaleZ*/
.box12 {
    transition-duration: 1s;
}
.box12:hover { 
    transform:scaleZ(1.5);
}

/*scaleZ*/

.box12 {

transition-duration: 1s;

}

.box12:hover {

transform:scaleZ(1.5);

}

カーソルを
合わせる

skew（傾ける）

skewは要素を傾けます。

skew…縦横に傾ける

/*skew*/
.box13 {
    transition-duration: 1s;
}
.box13:hover { 
    transform:skew(30deg,30deg);
}

/*skew*/

.box13 {

transition-duration: 1s;

}

.box13:hover {

transform:skew(30deg,30deg);

}

カーソルを
合わせる

skewX…横に傾ける

/*skewX*/
.box14 {
    transition-duration: 1s;
}
.box14:hover { 
    transform:skewX(30deg);
}

/*skewX*/

.box14 {

transition-duration: 1s;

}

.box14:hover {

transform:skewX(30deg);

}

カーソルを
合わせる

skewY…縦に傾ける

/*skewY*/
.box15 {
    transition-duration: 1s;
}
.box15:hover { 
    transform:skewY(30deg);
}

/*skewY*/

.box15 {

transition-duration: 1s;

}

.box15:hover {

transform:skewY(30deg);

}

カーソルを
合わせる