You can rotate a RadButton in the desired direction, just like any other HTML element. The rotation is achieved through CSS. Most browser use different CSS code to rotate an element,
so having consistent look under different browsers requires using browser-specific rules.
Click on any of the buttons to browse the map. They are rotated using some CSS code. Here it is:
The "North" Button is not rotated.
"East" Button
.mapEast
{
top: 190px;
right: -11px;
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-moz-transform: rotate(90deg); /* Firefox */
-o-transform: rotate(90deg); /* Opera */
-ms-transform: rotate(90deg); /* IE9 */
}
/* Internet Explorer fix */
.mapEast .EastBtn
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
right: -7px\9;
}
"West" Button
.mapWest
{
top: 190px;
left: -13px;
-webkit-transform: rotate(270deg); /* Safari and Chrome */
-moz-transform: rotate(270deg); /* Firefox */
-o-transform: rotate(270deg); /* Opera */
-ms-transform: rotate(270deg); /* IE9 */
}
/* Internet Explorer fix */
.mapWest .WestBtn
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
left: 14px\9;
}
"South" Button
.mapSouth
{
bottom: 1px;
right: 395px;
-webkit-transform: rotate(180deg); /* Safari and Chrome */
-moz-transform: rotate(180deg); /* Firefox */
-o-transform: rotate(180deg); /* Opera */
-ms-transform: rotate(180deg); /* IE9 */
}
/* Internet Explorer fix */
.mapSouth .SouthBtn
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
Remove filters for IE9 because it does not need them
/* Remove filter in IE9 */
._Telerik_IE9 .mapEast .EastBtn,
._Telerik_IE9 .mapSouth .SouthBtn,
._Telerik_IE9 .mapWest .WestBtn
{
filter: none;
}