css transform
関連タイピング
-
html初心者用のタイピングです。
プレイ回数5482短文英字50打 -
htmlの雛形覚え用
プレイ回数292英語長文258打 -
CSSでよく使うプロパティのタイピング
プレイ回数253英語長文584打 -
<span></span>打つだけです。
プレイ回数239英語13打 -
bootstrap5 form
プレイ回数132英語長文486打 -
記号の練習
プレイ回数483英語60秒 -
CSSでよく使う単語の練習です。
プレイ回数438長文英字1142打 -
プレイ回数69長文英字90秒
問題文
(ｔｒａｎｓｆｏｒｍ－ｏｒｉｇｉｎ：ｌｅｆｔ ｔｏｐ；)
基点transform-origin:50%50% 0;初期値
(ｔｒａｎｓｆｏｒｍ：ｔｒａｎｓｌａｔｅ（１０ｐｘ，１０ｐｘ）)
2D 移動 translateX()translateY()
(ｒｏｔａｔｅ（１０ｄｅｇ）)
2D 回転
(ｓｃａｌｅ（１，１．１）)
2D 伸縮 scaleX() scaleY()
(ｓｋｅｗ（１０ｄｅｇ）；)
回転 skewX()skewY() 2番目を省くとskewX()と同じ
(ｔｒａｎｓｆｏｒｍ：ｍａｔｒｉｘ（１，０，０，１，０，０）；)
1,4縮尺2,3傾斜5,6移動1,3,5水平2,4,6垂直
(ｔｒａｎｓｆｏｒｍ－ｓｔｙｌｅ：ｐｒｅｓｅｒｖｅ－３ｄ；)
3Dpreserve-3d 親要素に指定 flat
(ｐｅｒｓｐｅｃｔｉｖｅ：８００ｐｘ；)
親要素に指定
(ｐｅｒｓｐｅｃｔｉｖｅ－ｏｒｉｇｉｎ：ｒｉｇｈｔ ｂｏｔｔｏｍ；)
親要素perspective-origin:
(ｔｒａｎｓｆｏｒｍ：ｐｅｒｓｐｅｃｔｉｖｅ（２００ｐｘ）)
子要素
(ｔｒａｎｓｌａｔｅ３ｄ（２０ｐｘ，２０ｐｘ，２０ｐｘ）)
3D transformZ() 移動
(ｒｏｔａｔｅ３ｄ（１，２，３，６０ｄｅｇ）)
3DrotateX()rotateY()rotateZ()回転turn
(ｓｃａｌｅ３ｄ（１，２，３）；)
3d scale3d scaleZ()
(ｂａｃｋｆａｃｅ－ｖｉｓｉｂｉｌｉｔｙ：ｈｉｄｄｅｎ；)
rotateX()rotateY()rotateZ()と併用
(ｔｒａｎｓｉｔｉｏｎ：ｔｒａｎｓｆｏｒｍ ２ｓ ｌｉｎｅａｒ ０．５ｓ；)
transition
(ｔｒａｎｓｉｔｉｏｎ－ｐｒｏｐｅｒｔｙ：ｔｒａｎｓｉｔｉｏｎ－ｄｕｒａｔｉｏｎ：)
transition
(ｔｒａｎｓｉｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ：ｔｒａｎｓｉｔｉｏｎ－ｄｅｌａｙ：)
transition
(ａｎｉｍａｔｉｏｎ：ｎａｍｅ ２ｓ ｅａｓｅ １ｓ ３ ａｌｔｅｒｎａｔｅ ｂｏｔｈ ｐａｕｓｅｄ；)
animation
(ａｎｉｍａｔｉｏｎ－ｎａｍｅ：ａｎｉｍａｔｉｏｎ－ｄｕｒａｔｉｏｎ：)
animation
(ａｎｉｍａｔｉｏｎ－ｔｉｍｉｎｇ－ｆｕｎｃｔｉｏｎ：ｅａｓｅ－ｉｎ；)
liniear ease-in-out steps(4,end)
(ａｎｉｍａｔｉｏｎ－ｄｅｌａｙ：ａｎｉｍａｔｉｏｎ－ｉｔｅｒａｔｉｏｎ－ｃｏｕｎｔ：ｉｎｆｉｎｉｔｅ；)
animation
(ａｎｉｍａｔｉｏｎ－ｄｉｒｅｃｔｉｏｎ：ｎｏｒｍａｌ；)
向きnormal reverse alternate-reverse
(ａｎｉｍａｔｉｏｎ－ｆｉｌｌ－ｍｏｄｅ：ｆｏｒｗａｒｄｓ；)
none forwards backwards
(ａｎｉｍａｔｉｏｎ－ｐｌａｙ－ｓｔａｔｅ：ｒｕｎｎｉｎｇ；)
paused;