css transform
関連タイピング
-
html DOM要素
プレイ回数409英語長文285打 -
htmlやcssのタイピングです。
プレイ回数6018英語長文120秒 -
htmlの雛形覚え用
プレイ回数338英語長文258打 -
ブラウザで動くテトリスのコーディングです。
プレイ回数2628長文532打 -
プレイ回数3194長文795打 -
chatGPTに作らせた部分一致検索サイトです。
プレイ回数666長文590打 -
bootstrap table
プレイ回数138英語295打 -
bootstrap flex
プレイ回数136英語長文308打
問題文
(ｔｒａｎｓｆｏｒｍ－ｏｒｉｇｉｎ：ｌｅｆｔ ｔｏｐ；)
基点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;