Translate

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

Translate

The Telerik and Kendo UI Translate Utilities are CSS utility classes that enable you to apply translate 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-translate-{x}-{y} utility to translate an element.

On this page

Feedback