https://github.com/zachsaucier/click-based-rotation

Rotate an element depending on the click location
https://github.com/zachsaucier/click-based-rotation

Last synced: about 2 months ago
JSON representation

Rotate an element depending on the click location

• Host: GitHub
• URL: https://github.com/zachsaucier/click-based-rotation
• Owner: ZachSaucier
• Created: 2014-07-03T22:44:00.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2016-11-20T21:18:55.000Z (about 8 years ago)
• Last Synced: 2023-09-05T20:53:16.911Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://zachsaucier.github.io/ClickBasedRotation
• Size: 39.1 KB
• Stars: 18
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
ClickBasedRotation

==================

Rotate an element depending on the click (or touch) location. Pure vanilla JS! Yay!

###Demos

 - [Bruce Lee demo](http://codepen.io/Zeaklous/pen/AFEtL)

 - [Non-square shapes demo](http://zachsaucier.github.io/click-based-rotation/demo-shapes.html)

 - [Rotation type demo](http://zachsaucier.github.io/click-based-rotation/demo-type.html)

 - [Rotation origin demo](http://zachsaucier.github.io/click-based-rotation/demo-origin.html)

## Usage

 - Include the `cbrotation.js` or `cbrotation.min.js` file (usually at the bottom of the `body`)

 - Add the `rot-dir` class to any element(s) you want to have the effect

 - (optional) Set any of the data-attributes listed below to valid, custom values

 - 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

Side 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)

### Data-attributes

`rot-type` - Possible values: `realistic` (default) and `simple` - [Demo page](http://zachsaucier.github.io/click-based-rotation/demo-type.html)

 - `realistic` bases the effect on a calculation of distance from the center

 - `simple` has 1 of 5 preset effects based on where is clicked

`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)

 - Accepts all default CSS `transform-origin` values using the same syntax

 - **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

`rot-dur` - The duration, in seconds, of the total transition being applied - defaults to `.1`

`rot-ease` - The easing function applied to the transition, all CSS easing values allowed - defaults to `ease-out`

`rot-perspective` - Sets the perspective for the element's rotation - defaults to `400`

`rot-amount` - The amount to turn each click - defaults to `15`

 - When using it with `simple`,  it is directly the number of degrees to rotate each click

 - When using it with `realistic`, it affects the value by the following

:

    myTrans = "translateZ(" + (-(maxD - d) / 8) + "px) " +

              "rotateY(" + -dX / 8 * amount / 15 + "deg) " +

              "rotateX(" + dY / 4 * amount / 15 + "deg)";

`rot-init` - The transform that the element goes to on start and after a click - defaults to `rotate(0deg)`

`rot-start` - A function to call when the element is clicked - [demo page](http://codepen.io/Zeaklous/pen/AFEtL)

`rot-end` - A function to call when the element is done being clicked

### Example Usage

This will apply the effect using all of the default data values:

    
This is a minimal example


This is an example using every attribute:

    
This has every attribute used


#### Windows 8 Tile effect

    
I'm a Windows 8 tile