Created
November 15, 2014 02:43
-
-
Save twysto/0b5ac55cd43a87ddbdef to your computer and use it in GitHub Desktop.
[jQuery Plugin] getRotationDegrees.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function($) { | |
| $.fn.getRotationDegrees = function() { | |
| var angle = 0; | |
| var matrix = this.css(("-webkit-" || "-moz-" || "-ms-" || "-o-") + "transform"); | |
| if((typeof matrix == 'string' || matrix instanceof String) && matrix != 'none') { | |
| var values = matrix.split('(')[1].split(')')[0].split(','); | |
| var a = values[0]; | |
| var b = values[1]; | |
| angle = Math.round(Math.atan2(b, a) * (180 / Math.PI)); | |
| } | |
| return angle % 360 + (angle < 0 ? 360 : 0); | |
| }; | |
| }(jQuery)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="angle_0" class="rotate">0°</div> | |
| <div id="angle_45">45°</div> | |
| <div id="angle_360">360° = 0°</div> | |
| <div id="angle_minus735">-735°</div> | |
| <div id="angle_2005">2005°</div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js"></script> | |
| <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> | |
| <script src="getRotationDegrees.js"> | |
| var angle_45 = $('#angle_45').getRotationDegrees(); | |
| var angle_0 = $('#angle_0').getRotationDegrees(); | |
| var angle_360 = $('#angle_360').getRotationDegrees(); | |
| var angle_minus735 = $('#angle_minus735').getRotationDegrees(); | |
| var angle_2005 = $('#angle_2005').getRotationDegrees(); | |
| var msg = angle_0+'deg\r\n'+ | |
| angle_45+'deg\r\n'+ | |
| angle_360+'deg\r\n'+ | |
| angle_minus735+'deg\r\n'+ | |
| angle_2005+'deg'; | |
| alert(msg); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @green: hsl(120, 100%, 50%); | |
| @red: hsl(0, 100%, 50%); | |
| @purple: hsl(270, 100%, 50%); | |
| @blue: hsl(210, 100%, 50%); | |
| @orange: hsl(30, 100%, 50%); | |
| @white: hsl(0, 100%, 100%); | |
| @edge: 100px; | |
| @top: 50px; | |
| @left: @top; | |
| .rotate(@rotation: 0) { | |
| -webkit-transform:rotate(@arguments); | |
| -moz-transform:rotate(@arguments); | |
| -ms-transform:rotate(@arguments); | |
| -o-transform:rotate(@arguments); | |
| transform:rotate(@arguments); | |
| } | |
| body > div { | |
| position: absolute; | |
| width: @edge; | |
| height: @edge; | |
| line-height: @edge; | |
| text-align: center; | |
| color: @white; | |
| &#angle_0 { | |
| background:@green; | |
| top: @top; | |
| left: @left; | |
| .rotate(0deg); | |
| } | |
| &#angle_45 { | |
| background:@red; | |
| top: @top; | |
| left: @left + 2 * @edge; | |
| .rotate(45deg); | |
| } | |
| &#angle_360 { | |
| background:@purple; | |
| top: @top + @edge; | |
| left: @left + @edge; | |
| .rotate(360deg); | |
| } | |
| &#angle_minus735 { | |
| background:@blue; | |
| top: @top + 2 * @edge; | |
| left: @left; | |
| .rotate(-735deg); | |
| } | |
| &#angle_2005 { | |
| background:@orange; | |
| top: @top + 2 * @edge; | |
| left: @left + 2 * @edge; | |
| .rotate(2005deg); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment