Rotate function in javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

[Browser] Rotate DOM Elements, also on drag

License

kaisarsnippets/JavaScript-Rotate

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

KaisarCode Rotate is a stand-alone (not framework-dependant) library that allows the real rotation of any block or inline-block element in a Crossbrowser way. It was tested on major desktop, mobile, game console, and TV browsers. but should work in other devices too, if that exists. Here, we present different flavours:

• A simple one, in which we can rotate an element to a fixed angle
• A dynamic one, that we can grab with the cursor or touch, and slide its rotation as if it was a Dial wheel.

Add the library to your HTML document and execute it just by passing the DOM element, and the rotation degrees as parameter.

//KaisarCode Rotate var elem = document.getElementById("my-elem"); kcRotate(elem, 63); //KaisarCode Rotate Dial var elem = document.getElementById("my-elem"); kcRotateDial(elem);

Today (2015 — 2016), one can still use the simple rotate function, but it is way better to do it directly applying CSS styles. So, I really think in that function as educative-purpose only. Doesn’t happens the same with RotateDial, we still need JavaScript to achieve that drag-based functionality.

Aside from allow the element to be rotated by hand, KC Dial has several properties to make it more useful. Once we’ve initialized the rotational proces, we can retrieve data from it. Here is an example:

var elem = document.getElementById("my-elem"); var rotated = kcRotateDial(elem); rotated.onchange=function()//->fires every time we move the element var deg = rotated.deg; //->returns angle in degrees var rad = rotated.rad; //->returns angle in radians var per = rotated.per; //->returns angle in percentage var fullRad = rotated.fullRad; //->returns absolute angle in radians (unlimited spins) var fullDeg = rotated.fullDeg; //->returns absolute angle in degrees (unlimited spins) var fullPer = rotated.fullPer; //->returns absolute angle in percentage (unlimited spins) var spins = rotated.spin; //-> Amount of spins var clockwise = rotated.clock; //-> Am I going clockwise? console.log(deg); >

IE7 and higher, Firefox, Chrome, Safari, Opera, on Desktop, Mobile, Game Consoles, Smart TVs, and even on a potato.

Just for Dial, and positioning

Be careful to not reposition the rotated element directly, always put it into a container, and move the container. Because if not, IE will keep thinking that the element’s center point is on its natural place, and trust me, we don’t want that.

Make sure that the element to be rotated has the same width and height, because IExplorer will rotate the rendered element inside a fixed box with that dimensions. If you rotate a rectangle, the element will get cut off (like masked). If you really need to use a rectangular-sized element, please read the section below.

Fixing rectangular elements’ issues

Use a container large enough to wrap the element across all its rotational area. This would be sort of a canvas, with the visual parts in the exact middle of it. And apply the rotation to the container. In this case, You’ll have to add the attribute unselectable=»on» to the inner elements.

This script was tested on the real Browsers, and it works awesome. But, if you try to run it on compatibility mode (like, selecting IE version through the console) will not. And it’s not because a bug in the code. the CSS rotations (at least), doesn’t works on this case (For any library or implementation). No Problem, on the real IE8, IE9, IE10. Will work as intended, It’s just a compatibility mode issue, proper from the IExplorer CSS engine, and hasn’t solution yet (At least not that I know, If you find one. please tell us all).

style> #elem < width:350px; height:225px; background-color:orange; text-align:center; padding-top:125px; > style> div id pl-s">elem"> img src pl-s">rect.png" alt="" width pl-s">300" height pl-s">100" unselectable pl-s">on" /> div> script> var elem = document.getElementById("elem"); kcRotate(elem, 63); script>

Hey, with a table-styled element it’s better

style> #elem< display:table; border:none; background-color:orange; width:300px; height:300px; > #elem .elem-cell< display:table-cell; vertical-align:middle; text-align:center; > style> div id pl-s">elem"> div class pl-s">elem-cell" unselectable pl-s">on"> span class pl-s">visual-elem" unselectable pl-s">on">They see me Rollin'. span> div> div> script> var elem = document.getElementById("elem"); kcRotate(elem, 63); script>

If you use text as content, it is better to give to the container a background color. This way you’ll prevent messed border transparencies (Proper from IExplorer).

Kc Rotate Dial on JSFiddle

Источник

Javascript how to use transform rotate

Note that the numbers we captured are string representations of those numbers, not actual numbers. If you need them to be numbers you could use to convert them to numbers.

Reset transform: rotate() without invoking -webkit-transition: style

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease ?

I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.

var r=-(3600 + random); $("#wheel").css("transform","rotate("+r+"deg)"); $("#wheel").css("-moz-transform","rotate("+r+"deg)"); $("#wheel").css("-webkit-transform","rotate("+r+"deg)"); $("#wheel").css("-o-transform","rotate("+r+"deg)"); $("#wheel").one('webkitTransitionEnd', function() < $("#wheel").css("transform","none"); $("#wheel").css("-moz-transform","none"); $("#wheel").css("-webkit-transform","none"); $("#wheel").css("-o-transform","none"); >); 

I think I have a solution for this. By changing the css class to a ‘default rotation’ class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.

element.className = "spin0"; setTimeout(function()< element.className = "spin750"; >, 10); 

Rotation — Rotate a div using javascript, To rotate a DIV we can add some CSS that, well, rotates the DIV using CSS transform rotate. To toggle the rotation we can keep a flag, a simple variable with a boolean value that tells us what way to rotate. Code sample-webkit-transform : rotate(66deg);-moz-transform : rotate(66deg);-ms-transform : rotate(66deg);-o-transform : rotate(66deg);transform : rotate(66deg);Feedback

How to use a variable for the rotation function in javascript?

I’m trying to rotate an element every second by a certain amount using transform:rotate() but I can’t figure out how to use a variable for the rotation instead of a string.

I tried making a concatenation function as well as concatenating inside the rotate function itself

 function runTime() < var d = new Date(); var s = s+6 var m = m+.1 var h = h+.008333 $("#seconds").css(); $("#minutes").css(); $("#hours").css(); t=setTimeout(runTime,1000); > 

I don’t have jquery to verify, but your code should work.

• Ensure your s , m , and h variables are numerics as opposed to strings, otherwise adding s+6 will concatenate as oppose to add.
• You can use setInterval(runTime, 1000) once as opposed to setTimeout each iteration
• You can use string templates e.g. `rotate($deg` to make your css properties easier to read.

const $ = document.querySelector.bind(document);let runTime = () => < let d = new Date(); let s = d.getSeconds() * 6; let m = d.getMinutes() * 6 let h = d.getHours() * 30; $("#seconds").style.transform = `rotate($deg)`; $("#minutes").style.transform = `rotate($deg)`; $("#hours").style.transform = `rotate($deg)`; >setInterval(runTime, 1000);

div < outline: 1px solid black; position: absolute; >#hours < width: 3px; height: 26px; >#minutes < width: 2px; height: 30px; >#seconds

How to rotate an HTML div element 90 degrees using, An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale and others to perform various kinds of transformation to elements. The rotate () transformation function can be used as the value to rotate the element. It takes one parameter which defines the …

How to regex rotate properties from transform value

Let’s say I have a CSS transform Property that looks like this:

scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg) 

I need to remove the substring rotateX(50) rotateY(20) rotateZ(10) from the property AND get the 3 values 50 , 20 , and 10 as an array

How would you do this using javascript?

var txt = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)';var array = txt.match(/\(\d+(?=\))/g).map(function(x)); document.write(array);var new_text = txt.replace(/\).* /, ') '); document.write('
' + new_text);

Use this regex rotateX\((\d+)\)\s+rotateY\((\d+)\)\s+rotateZ\((\d+)\) ;

var transform = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)'; var match = transform.match(/rotateX\((\d+)\)\s+rotateY\((\d+)\)\s+rotateZ\((\d+)\)/); var arr = match.slice(1, 4); 

I’d use 3 separate RegExp so it will work no matter the order of the rotate statements. This example uses ES6 destructuring for brevity but you could easily write it in ES5 using a temporary variable to hold the .match results.

var transformString = 'scale(1.02, 2.0) rotateX(50) rotateY(20) rotateZ(10) skew(100deg)'; // The first variable receives the entire match which we will later remove from // transformString. The second variable receives the match group, the numeric // value inside the parentheses var [xText, xValue] = transformString.match(/\srotateX\((\d+)\)/i); var [yText, yValue] = transformString.match(/\srotateY\((\d+)\)/i); var [zText, zValue] = transformString.match(/\srotateZ\((\d+)\)/i); // remove rotate commands [xText, yText, zText].forEach(function (text) < transformString = transformString.replace(text, ''); >); var values = [xValue, yValue, zValue]; console.log(transformString, values); 

Note that the numbers we captured are string representations of those numbers, not actual numbers. If you need them to be numbers you could use .map to convert them to numbers.

values = values.map(function (n) < return +n; >); 

JavaScript rotate a SVG object around specific point, I want to rotate the path about specific point, when i use the rotate(45 50 50) below instead of the rotate(x) i get this error: VM267:85 Uncaught SyntaxError: missing ) after argument list what shall I do? Note NOt interested to use any ready library to handle the task, need to so it using the standard API only. …

Источник

JavaScript Rotate

Summary: in this tutorial, you’ll learn how to use the JavaScript rotate() method to rotate drawing objects.

Introduction to JavaScript rotate() canvas API

The rotate() is a method of the 2D drawing context. The rotate() method allows you to rotate a drawing object on the canvas.

Here is the syntax of the rotate() method:

ctx.rotate(angle)Code language: CSS (css)

The rotate() method accepts a rotation angle in radians.

If the angle is positive, the rotation is clockwise. In case the angle is negative, the rotation is counterclockwise.

To convert a degree to a radian, you use the following fomular:

degree * Math.PI / 180Code language: JavaScript (javascript)

When adding a rotation, the rotate() method uses the canvas origin as the rotation center point.

The following picture illustrates the rotation:

If you want to change the rotation center point, you need to move the origin of the canvas using the translate() method.

JavaScript rotate() example

The following example draws a red rectangle starting from the center of the canvas. It then translates the origin of the canvas to the canvas’ center and draws the second rectangle with a rotation of 45 degrees:

HTML

canvas id="canvas" height="300" width="500"> canvas>Code language: HTML, XML (xml)

JavaScript

const canvas = document.querySelector('#canvas'); if (canvas.getContext) < // rectangle's width and height const width = 150, height = 20; // canvas center X and Y const centerX = canvas.width / 2, centerY = canvas.height / 2; const ctx = canvas.getContext('2d'); // a red rectangle ctx.fillStyle = 'red'; ctx.fillRect(centerX, centerY, width, height); // move the origin to the canvas' center ctx.translate(centerX, centerY); // add 45 degrees rotation ctx.rotate(45 * Math.PI / 180); // draw the second rectangle ctx.fillStyle = 'rgba(0,0,255,0.5)'; ctx.fillRect(0, 0, width, height); >Code language: JavaScript (javascript)

Summary

Источник