Transform

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

Scale

The Telerik and Kendo UI Scale Utilities are CSS utility classes that enable you to apply scaling transformation to an element.

Utility ClassCSS Property
.k-flip-htransform: scaleX( -1 );
.k-flip-vtransform: scaleY( -1 );
.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-rotate-315transform: rotate( 315deg );
.k-scale-0transform: scale( 0, 0 );
.k-scale-1transform: scale( 1, 1 );
.k-scale-2transform: scale( 2, 2 );
.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% );
.k-translate-100-100transform: translate( 100%, 100% );

Applying

Use the k-scale-{value} utility to scale an element.

On this page