Skew

The Telerik and Kendo UI Transform utilities enable you to apply transformations such as scaling, rotating, skewing and others to an element.

On this page

Skew

The Telerik and Kendo UI Skew Utilities are CSS utility classes that enable you to apply skewing transformations to an element.

Utility ClassCSS Property
.k-flip-htransform: scaleX( -1 );
.k-flip-vtransform: scaleY( -1 );
.k-rotate-315transform: rotate( 315deg );
.k-rotate-0transform: rotate( 0 );
.k-rotate-45transform: rotate( 45deg );
.k-rotate-90transform: rotate( 90deg );
.k-rotate-135transform: rotate( 135deg );
.k-rotate-180transform: rotate( 180deg );
.k-rotate-225transform: rotate( 225deg );
.k-rotate-270transform: rotate( 270deg );
.k-scale-2transform: scale( 2, 2 );
.k-scale-0transform: scale( 0, 0 );
.k-scale-1transform: scale( 1, 1 );
.k-translate-100-100transform: translate( 100%, 100% );
.k-translate-0transform: translate( 0, 0 );
.k-translate-0-50transform: translate( 0, 50% );
.k-translate-0-100transform: translate( 0, 100% );
.k-translate-50-0transform: translate( 50%, 0 );
.k-translate-50-50transform: translate( 50%, 50% );
.k-translate-50-100transform: translate( 50%, 100% );
.k-translate-100-0transform: translate( 100%, 0 );
.k-translate-100-50transform: translate( 100%, 50% );

Applying

Use the k-skew-{x|y}-{value} utility to skew an element.

On this page

Feedback