CSS 構文 transform (変形)

背景
投稿者投稿者marineいいね1お気に入り登録2
プレイ回数952難易度(3.5) 1146打 英語 英字
css 3 暗記用です。
要素の移動・拡大・縮小・傾斜・回転や立体的な表現もできるtransformプロパティー♪
animationとセットで使いこなせるようになりたいですね〜。

関連タイピング

問題文

ふりがな非表示 ふりがな表示

(transform-style:flat;)

transform-style:flat;

(transform-style:preserve-3d;)

transform-style:preserve-3d;

(perspective:500px;)

perspective:500px;

(transform:translate(10px,20px);)

transform:translate(10px,20px);

(transform:translateX(30%);)

transform:translateX(30%);

(transform:translateY(-40px);)

transform:translateY(-40px);

(transform:translateZ(50px);)

transform:translateZ(50px);

(transform:translateZ(-60px);)

transform:translateZ(-60px);

(transform:translate3d(70%,80%,-90px);)

transform:translate3d(70%,80%,-90px);

(transform:rotate(0.5turn);)

transform:rotate(0.5turn);

(transform:rotate3d(1,2,3,10deg);)

transform:rotate3d(1,2,3,10deg);

(transform:rotateX(-0.8turn);)

transform:rotateX(-0.8turn);

(transform:rotateY(10deg);)

transform:rotateY(10deg);

(transform:rotateZ(10deg);)

transform:rotateZ(10deg);

(transform:scale(0.5,1);)

transform:scale(0.5,1);

(transform:scaleX(1.5);)

transform:scaleX(1.5);

(transform:scaleY(2);)

transform:scaleY(2);

(transform:scaleZ(2.5);)

transform:scaleZ(2.5);

(transform:scale3d(3,3.5,4);)

transform:scale3d(3,3.5,4);

(transform:skewX(30deg);)

transform:skewX(30deg);

など

(transform:skewY(40deg);)

transform:skewY(40deg);

(transform:skew(-10deg,-20deg);)

transform:skew(-10deg,-20deg);

(transform:translate3d(10px,20px,30px) rotateY(40deg);)

transform:translate3d(10px,20px,30px) rotateY(40deg);

(transform-origin:2px;)

transform-origin:2px;

(transform-origin:bottom;)

transform-origin:bottom;

(transform-origin:left 2px;)

transform-origin:left 2px;

(transform-origin:right top;)

transform-origin:right top;

(transform-origin:right top;)

transform-origin:right top;

(transform-origin:2px 30% 10px;)

transform-origin:2px 30% 10px;

(transform-origin:left 5px -3px;)

transform-origin:left 5px -3px;

(transform-origin:right bottom 20px;)

transform-origin:right bottom 20px;

(transform-origin:50% 50% 0;)

transform-origin:50% 50% 0;

(perspective-origin:50% 50%;)

perspective-origin:50% 50%;

(perspective-origin:left top;)

perspective-origin:left top;

(perspective-origin:top;)

perspective-origin:top;

(perspective-origin:right top;)

perspective-origin:right top;

(perspective-origin:left;)

perspective-origin:left;

(perspective-origin:right;)

perspective-origin:right;

(perspective-origin:left bottom;)

perspective-origin:left bottom;

(perspective-origin:bottom;)

perspective-origin:bottom;

(perspective-origin:right bottom;)

perspective-origin:right bottom;

(perspective-origin:200% -200%;)

perspective-origin:200% -200%;

問題文を全て表示 一部のみ表示 誤字・脱字等の報告

◆コメントを投稿

※誹謗中傷、公序良俗に反するコメント、歌詞の投稿、無関係な宣伝行為は禁止です。

※このゲームにコメントするにはログインが必要です。

※コメントは日本語で投稿してください。

※歌詞は投稿しないでください!

marineのタイピング

オススメの新着タイピング

タイピング練習講座 ローマ字入力表 アプリケーションの使い方 よくある質問

人気ランキング

注目キーワード