CSS 構文 transform （変形）
css 3 暗記用です。
要素の移動･拡大･縮小･傾斜･回転や立体的な表現もできるtransformプロパティー♪
animationとセットで使いこなせるようになりたいですね〜。
animationとセットで使いこなせるようになりたいですね〜。
| 順位 | 名前 | スコア | 称号 | 打鍵/秒 | 正誤率 | 時間(秒) | 打鍵数 | ミス | 問題 | 日付 |
|---|---|---|---|---|---|---|---|---|---|---|
| 1 | mh | 2901 | すごいね！ | 2.9 | 98.2% | 388.1 | 1146 | 20 | 42 | 2026/01/26 |
| 2 | mikaroko | 2146 | 頑張ったね！ | 2.2 | 97.4% | 520.0 | 1146 | 30 | 42 | 2025/12/18 |
関連タイピング
-
プログラミング用のタイピング練習
プレイ回数5399 英語長文300秒 -
JavaScript 暗記用です
プレイ回数2197 英語長文2218打 -
あの「プレイグラム」を打ってください
プレイ回数15 短文60秒 -
競技プログラミングに特化したc++コードのタイピングです。
プレイ回数2875 英語長文300秒 -
全文字タイピング練習(108文字×100問,2分間ランダム)
プレイ回数4457 英語長文120秒 -
JavaScript 暗記用です
プレイ回数1546 英語長文851打 -
JavaScript 暗記用です
プレイ回数1309 英語長文1345打 -
プログラミングで良く使う構文を練習します
プレイ回数615 英字615打
問題文
ふりがな非表示
ふりがな表示
(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%;