css transform

背景
投稿者投稿者パンサーfkいいね0お気に入り登録
プレイ回数1070難易度(4.0) 693打 長文 英字
自分用transform まとめ

関連タイピング

問題文

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

(transform-origin:left top;)

基点transform-origin:50%50% 0;初期値

(transform:translate(10px,10px))

2D 移動 translateX()translateY()

(rotate(10deg))

2D 回転

(scale(1,1.1))

2D 伸縮 scaleX() scaleY()

(skew(10deg);)

回転 skewX()skewY() 2番目を省くとskewX()と同じ

(transform:matrix(1,0,0,1,0,0);)

1,4縮尺2,3傾斜5,6移動1,3,5水平2,4,6垂直

(transform-style:preserve-3d;)

3Dpreserve-3d 親要素に指定 flat

(perspective:800px;)

親要素に指定

(perspective-origin:right bottom;)

親要素perspective-origin:

(transform:perspective(200px))

子要素

(translate3d(20px,20px,20px))

3D transformZ() 移動

(rotate3d(1,2,3,60deg))

3DrotateX()rotateY()rotateZ()回転turn

(scale3d(1,2,3);)

3d scale3d scaleZ()

(backface-visibility:hidden;)

rotateX()rotateY()rotateZ()と併用

(transition:transform 2s linear 0.5s;)

transition

(transition-property:transition-duration:)

transition

(transition-timing-function:transition-delay:)

transition

(animation:name 2s ease 1s 3 alternate both paused;)

animation

(animation-name:animation-duration:)

animation

(animation-timing-function:ease-in;)

liniear ease-in-out steps(4,end)

など

(animation-delay:animation-iteration-count:infinite;)

animation

(animation-direction:normal;)

向きnormal reverse alternate-reverse

(animation-fill-mode:forwards;)

none forwards backwards

(animation-play-state:running;)

paused;

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