skew - 題不知

skew

Q.skewとはどういう動きであるか？

svg要素の基本的な使い方まとめ

transform属性では下記のtransform関数を記述することでアフィン変換を指定する．

skewX

横方向の傾斜[angle]

skewY

縦方向の傾斜[angle]

skewX

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/skew/x.svg

剪断ダンスだ！takker.icon

こいつかァ〜cFQ2f7LRuLYP.icon

欲をいうとアニメーションに緩急つけたいtakker.icon

linearを別の函数に替えるとできる

x軸方向のせん断効果を得る．一般的な用語でないため判りにくいが要は横方向に傾けるといった風に憶えれば良い．

x軸へ平行四辺形となるような動きをする

なお，tan関数の特性から180度毎に元に戻る．

code:x.svg

<style>

@keyframes skewAnimation {

0% { transform: skewX(0deg); }

25% { transform: skewX(30deg); }

50% { transform: skewX(0deg); }

75% { transform: skewX(-30deg); }

100% { transform: skewX(0deg); }

}

#icon {

animation: skewAnimation 2s linear infinite;

transform-origin: center center ;

}

</style>

</g>

</svg>

SkewY

https://svg-hosting.vercel.app/api/svg?url=https://scrapbox.io/api/code/issac-37765679/skew/y.svg

y軸方向のせん断効果を得る．先ほどとは異なり今度は縦方向に傾けると考えれば良い．

code:y.svg

<style>

@keyframes skewAnimation {

0% { transform: skewY(0deg); }

25% { transform: skewY(45deg); }

50% { transform: skewY(0deg); }

75% { transform: skewY(-45deg); }

100% { transform: skewY(0deg); }

}