{"id":19092519,"url":"https://github.com/zachsaucier/click-based-rotation","last_synced_at":"2025-04-30T11:54:28.672Z","repository":{"id":18303099,"uuid":"21479146","full_name":"ZachSaucier/click-based-rotation","owner":"ZachSaucier","description":"Rotate an element depending on the click location","archived":false,"fork":false,"pushed_at":"2016-11-20T21:18:55.000Z","size":40,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T01:32:52.054Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zachsaucier.github.io/ClickBasedRotation","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZachSaucier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-03T22:44:00.000Z","updated_at":"2025-01-20T17:27:54.000Z","dependencies_parsed_at":"2022-08-25T11:30:25.594Z","dependency_job_id":null,"html_url":"https://github.com/ZachSaucier/click-based-rotation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachSaucier%2Fclick-based-rotation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachSaucier%2Fclick-based-rotation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachSaucier%2Fclick-based-rotation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachSaucier%2Fclick-based-rotation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZachSaucier","download_url":"https://codeload.github.com/ZachSaucier/click-based-rotation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251694151,"owners_count":21628799,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T03:20:06.193Z","updated_at":"2025-04-30T11:54:28.645Z","avatar_url":"https://github.com/ZachSaucier.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"ClickBasedRotation\n==================\n\nRotate an element depending on the click (or touch) location. Pure vanilla JS! Yay!\n\n###Demos\n\n - [Bruce Lee demo](http://codepen.io/Zeaklous/pen/AFEtL)\n - [Non-square shapes demo](http://zachsaucier.github.io/click-based-rotation/demo-shapes.html)\n - [Rotation type demo](http://zachsaucier.github.io/click-based-rotation/demo-type.html)\n - [Rotation origin demo](http://zachsaucier.github.io/click-based-rotation/demo-origin.html)\n\n## Usage\n - Include the `cbrotation.js` or `cbrotation.min.js` file (usually at the bottom of the `body`)\n - Add the `rot-dir` class to any element(s) you want to have the effect\n - (optional) Set any of the data-attributes listed below to valid, custom values\n - You may want to also set `transform-style: preserve-3d` (with other prefixes) on the `rot-dir` element as well, depending on how you want it to feel\n\nSide note: If you want the elements to rotate on mouse move instead, you might look at [this project](http://stackoverflow.com/questions/17790869/rotating-elements-according-to-cursor-position-with-jquery/17795610#17795610)\n\n### Data-attributes\n\n`rot-type` - Possible values: `realistic` (default) and `simple` - [Demo page](http://zachsaucier.github.io/click-based-rotation/demo-type.html)\n\n - `realistic` bases the effect on a calculation of distance from the center\n - `simple` has 1 of 5 preset effects based on where is clicked\n\n`rot-origin` -  The transform origin for the rotation occurring - defaults to `\"center center\"` - [Demo page](http://zachsaucier.github.io/click-based-rotation/demo-origin.html)\n\n - Accepts all default CSS `transform-origin` values using the same syntax\n - **Only applies to `simple` type**. Also accepts a value of `opposite` which will set the `transform-origin` to the opposite of the rotation direction, creating a rotating door effect\n\n`rot-dur` - The duration, in seconds, of the total transition being applied - defaults to `.1`\n\n`rot-ease` - The easing function applied to the transition, all CSS easing values allowed - defaults to `ease-out`\n\n`rot-perspective` - Sets the perspective for the element's rotation - defaults to `400`\n\n`rot-amount` - The amount to turn each click - defaults to `15`\n\n - When using it with `simple`,  it is directly the number of degrees to rotate each click\n - When using it with `realistic`, it affects the value by the following\n\n:\n\n    myTrans = \"translateZ(\" + (-(maxD - d) / 8) + \"px) \" +\n              \"rotateY(\" + -dX / 8 * amount / 15 + \"deg) \" +\n              \"rotateX(\" + dY / 4 * amount / 15 + \"deg)\";\n\n`rot-init` - The transform that the element goes to on start and after a click - defaults to `rotate(0deg)`\n\n`rot-start` - A function to call when the element is clicked - [demo page](http://codepen.io/Zeaklous/pen/AFEtL)\n\n`rot-end` - A function to call when the element is done being clicked\n\n### Example Usage\n\nThis will apply the effect using all of the default data values:\n\n    \u003cdiv class=\"rot-dir\"\u003eThis is a minimal example\u003c/div\u003e\n\nThis is an example using every attribute:\n\n    \u003cdiv class=\"rot-dir\" data-rot-type=\"simple\" \n                         data-rot-origin=\"opposite\" \n                         data-rot-dur=\".2\" \n                         data-rot-ease=\"ease-in-out\" \n                         data-rot-perspective=\"800\" \n                         data-rot-amount=\"10\"\n                         data-rot-init=\"rotate3d(1,1,0,10deg)\"\n                         data-rot-start=\"atStart\"\n                         data-rot-end=\"atEnd\"\n    \u003eThis has every attribute used\u003c/div\u003e\n\n#### Windows 8 Tile effect\n\n    \u003cdiv class=\"rot-dir\" data-rot-type=\"simple\" data-rot-origin=\"opposite\"\u003eI'm a Windows 8 tile\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachsaucier%2Fclick-based-rotation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachsaucier%2Fclick-based-rotation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachsaucier%2Fclick-based-rotation/lists"}