css transform
自分用transform まとめ
関連タイピング
-
htmlの雛形覚え用
プレイ回数908 英語長文258打 -
htmlの単語をマスター
プレイ回数671 短文英字93打 -
HTMLのタグを打とう!
プレイ回数904 短文90秒 -
chatGPTに作らせた部分一致検索サイトです。
プレイ回数1088 長文590打 -
プログラミングでよく使う記号や構文を練習したい人向け
プレイ回数1万 長文956打 -
htmlのタグを入力
プレイ回数181 300秒 -
自分練習用
プレイ回数439 長文259打 -
CSS 3 暗記用です。
プレイ回数1033 英語長文481打
問題文
ふりがな非表示
ふりがな表示
(ｔｒａｎｓｆｏｒｍ－ｏｒｉｇｉｎ：ｌｅｆｔ ｔｏｐ；)
基点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;