Flip

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

Flip

The Telerik and Kendo UI Flip Utilities are CSS utility classes that enable you to flip an element on its vertical or horizontal axis.

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% );

Horizontal

Use the k-flip-h utility to flip an element horizontally.

Verical

Use the k-flip-v utility to flip an element vertically.

Feedback