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.