css　transform

背景
投稿者投稿者パンサーｆｋ  いいね0  お気に入り登録
プレイ回数1096  難易度(4.0) 693打 長文 英字
タグcss transform html animation transition
自分用transform まとめ

関連タイピング

関連タイピング一覧

問題文

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

(ｔｒａｎｓｆｏｒｍ－ｏｒｉｇｉｎ：ｌｅｆｔ　ｔｏｐ；)

基点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;

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