CSS3「transform」のまとめ

Posted on by

目次

CSS3のtransformでテキストや画像を動かします!!

ベンダープレフィックスは省略しています。

要素の回転を指定します。

transform: rotate();・・・XとYを同時に指定
transform: rotateX();
transform: rotateY(); 

    #txt01 {
    	animation: animation01 2s infinite ease 1s both;
    }
    @keyframes animation01 {
    	from {
    		transform: rotate(0deg);
    	}
    	to {
    		transform: rotate(360deg);
    	}
    }

aaaaaaa

transform: rotateX();

      #txt02 {
    	animation: animation02 2s infinite ease 1s both;
    }
    @keyframes animation02 {
    	from {
    		transform: rotateX(0deg);
    	}
    	to {
    		transform: rotateX(360deg);
    	}
    }

aaaaaaa

transform: rotateY();

         #txt03 {
    	animation: animation03 2s infinite ease 1s both;
    }
    @keyframes animation03 {
    	from {
    		transform: rotateY(0deg);
    	}
    	to {
    		transform: rotateY(360deg);
    	}
    }

aaaaaaa

参考サイト

WEB Drawer