LESS Rotate Mixin for IE

rotate.less

.rotate(@val) {
	-moz-transform: rotate(@val);  /* FF3.5+ */
	-o-transform: rotate(@val);  /* Opera 10.5 */
	-webkit-transform: rotate(@val);  /* Saf3.1+, Chrome */
	-ms-transform: rotate(@val);  /* IE9 */
	transform: rotate(@val);

	/* IE6-IE8 */
	@radians: ~`parseInt("@{val}") * Math.PI * 2 / 360`;
	@costheta: ~`Math.cos("@{radians}")`;
	@sintheta: ~`Math.sin("@{radians}")`;
	@negsintheta: ~`"@{sintheta}" * -1`;
	filter: ~"progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=@{costheta}, M12=@{negsintheta}, M21=@{sintheta}, M22=@{costheta})";
	zoom: 1;
}

.ie8rotatefix(@deg, @width, @height) {
	// This one offsets the element rotated in IE8. Only apply it on IE8.

	// Based on answer from Dennis Bunskoek:
	// http://stackoverflow.com/questions/10802323/how-to-rotate-in-internet-explorer

	// function deg2rad(deg) {
	//     return deg * (2 * Math.PI) / 360;
	// }

	// var rad = deg2rad(deg);
	@rad: ~`parseInt("@{deg}") * Math.PI * 2 / 360`;
	// top: @rad;

	// // calculate bounding box width and height
	// var bb_w = Math.abs(h * Math.sin(rad)) + Math.abs(w * Math.cos(rad));
	// var bb_h = Math.abs(h * Math.cos(rad)) + Math.abs(w * Math.sin(rad));
	@bbw: ~`Math.abs(parseInt("@{height}") * Math.sin("@{rad}")) + Math.abs(parseInt("@{width}") * Math.cos("@{rad}"))`;
	@bbh: ~`Math.abs(parseInt("@{height}") * Math.cos("@{rad}")) + Math.abs(parseInt("@{width}") * Math.sin("@{rad}"))`;

	// // calculate offsets
	// var offset_left = Math.floor((w / 2) - (bb_w / 2));
	// var offset_top = Math.floor((h / 2) - (bb_h / 2));
	@offsetleft: ~`Math.floor((parseInt("@{width}")/2)-("@{bbw}"/2))`;
	@offsettop: ~`Math.floor((parseInt("@{height}")/2)-("@{bbh}"/2))`;

	// IMPORTANT: reduce offset again - own quick fix for missed offset values
	@offsetleft2: ~`Math.floor("@{offsetleft}"/2)`;
	@offsettop2: ~`Math.floor("@{offsettop}"/2)`;

	margin-left: @offsetleft2+0px;
	margin-top: @offsettop2+0px;
}