This content originally appeared on Blog and was authored by Blog
By default, CSSPlugin uses a skewType
of "compensated"
which affects the skewX
/skewY
values in a slightly different (arguably more intuitive) way because visually the object isn't stretched. For example, if you set transform:skewX(85deg)
in the browser via CSS, the object would become EXTREMELY long (stretched) whereas with skewType:"compensated"
, it would look more like it sheared in 3D space. This was a purposeful design decision because this behavior is more likely what animators desire. If you prefer the uncompensated behavior, you can set CSSPlugin.defaultSkewType = "simple"
which affects the default for all skew tweens, or for an individual tween you can set the special property skewType:"simple"
.
Watch the video
Demo: skewType compensated vs simple
Remember, if you hit the 360 button you could crash your browser as explained in the video.
This content originally appeared on Blog and was authored by Blog

Blog | Sciencx (2019-04-15T15:38:46+00:00) QuickTip: skewType. Retrieved from https://www.scien.cx/2019/04/15/quicktip-skewtype/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.