How do I rotate an image in Javascript or CSS - javascript

I am creating a simple game.
I want to use jQUERY to rotate the joints making it move. I am using .animate ( http://api.jquery.com/animate/ ) to animate CSS properties but if it is also possible to use Javscript, I can make my own custom code.
More TO-THE-POINT
How do I rotate images in CSS or Javascript? I prefer CSS but Javascript is fine too.
If it is impossible (which I am pretty sure it is but I am not giving up yet) is there any other possible way to do what i am trying to do without making a bunch of seperate images, each rotated a different way.
Or can anyone at least give me an example of a site that does something similar.
EDIT: I need 1 CSS property (no -something: rotation(500deg);) that works with FireFox, Safari and Chrome because those are the only browsers I really work with.

Firefox and the Webkit browsers support a "transform" CSS property ("-webkit-transform", "-moz-transform"). Those can do all sorts of interesting things. There's a very weak IE tool that allows very limited rotation, so it's not really an option for something like a game.
Here's a demo page I made for another Stackoverflow question a few days ago: http://gutfullofbeer.net/compass.html

As shown in the image above
1) is -90 degree or 270 degree rotation
2) is +90 degree rotation and
3) is 180 degree rotation.
Note :- The quadrant containing blue square is the original image position in web browser when displayed with img tag. This is the only visible section to developer in web browser. On rotation of image from its top left point it will switch to the invisible quadrant. Hence it is very very important to use translateX and translateY property along with rotate property in css to drag the image from invisible quadrant to visible quadrant to display it on web browser. Please refer to css transform property for more info.
The css for the same is as below
.image_rotate_270 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(270deg) translateX(-100%);
-webkit-transform: rotate(270deg) translateX(-100%);
-ms-transform: rotate(270deg) translateX(-100%);
}
.image_rotate_90 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(90deg) translateY(-100%);
-webkit-transform: rotate(90deg) translateY(-100%);
-ms-transform: rotate(90deg) translateY(-100%);
}
.image_rotate_180 {
transform-origin: top left; /* IE 10+, Firefox, etc. */
-webkit-transform-origin: top left; /* Chrome */
-ms-transform-origin: top left; /* IE 9 */
transform: rotate(180deg) translateX(-100%) translateY(-100%);
-webkit-transform: rotate(180deg) translateX(-100%) translateY(-100%);
-ms-transform: rotate(180deg) translateX(-100%) translateY(-100%);
}
Now use this class names inside the class property of img tag.
<img src="xyz.jpg" id="image" class="image_rotate_90"/>
For rotation of -90 and +90 you will sometimes need to alter its height and width either with screen resolution or with original image resolution so that image will retain its original shape. Do it using javascript inside the body tag after image is loaded.
<script>
document.getElementById("image").width = screen.height;
document.getElementById("image").height = screen.width;
</script>
Suppose your original image is of 640 X 480 resolution. i.e. width = 480 and height = 640. So when you rotate the image, it becomes a image with resolution 480 X 640. So to retain its original shape. You can do the following under body tag after image loaded .
<script>
document.getElementById("image").width = 480px;
document.getElementById("image").height = 640px;
</script>

Some browsers support this:
Rotate That Image with CSS

Not a full answer, but in case it's helpful here's a fun little bookmarklet I have in Safari (works in chrome as well) that will cause the page contents to rotate:
javascript:(function(){var%20d=0;setInterval(function(){document.body.style['-webkit-transform']='rotate('+%20d%20+'deg)';d+=1},10)}());
I figured it might be helpful to see an example usage.

Not ideal, but you could make separate image files for each rotated state of the image, then use JavaScript to change <img src="XXX" /> or CSS to change background-image: url('XXX'); Once the images have loaded (you could even pre-load them with JS), the animation between them should be very fast.

Have you ever tried: http://jqueryrotate.com/ ??
Works great in all modern browsers including IE>=6

Related

How to set zoom on a element using Javascript on Firefox?

I can change a page element on Chrome using zoom
document.getElementById("pane-side").style.zoom = 0.5
Looks like Firefox did not support zoom, when i run the same code nothing happens.
Im searching for how to use zoom on Firefox, and i got this code:
document.getElementById("pane-side").style["-moz-transform"] = "scale(0.5)"
But the result was not what I expected:
Im trying to zoom out the element like on Chrome, any advice?
-EDIT-
The element I'm trying to zoom in is from the page web.whatsapp.com, the panel where show some contacts when you type something in the search (like on the chrome photo).
I hope you are not using this CSS property for a website in production,
the property zoom is a non-standard CSS property, originated from IE, unofficially proposed in May 2015 by Rossen Atanassov working at Microsoft.
It is unsafe to use since it will not work for every browser (and in my humble opinion, probably not going to be implemented). Unfortunately, this CSS property is not implemented in the Firefox Browser hence you are experiencing this issue.
I see that you already tried to use transform: scale(); instead,
and the difference in your screenshot is due to the fact zoom affects the layout size of the elements, while transform: scale(); does not.
You could try with the CSS at-rule #viewport, but keep in mind that this one was deprecated too (in 2020, here are the details: https://github.com/w3c/csswg-drafts/issues/4766) and probably doesn't work in Firefox either.
In your CSS file:
#viewport {
zoom: 1
}
A zoom factor of 1 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.
That being said, you could also try to set bigger the font size of the target element (to have a zoomed-in effect).
If this is not enough, you could try to find a good balance between those properties.
I'll do the CSS example that might scale up all the font sizes:
body {
transform: scale(1.5);
font-size: 150%; // or any other value that is bigger than the computed value
padding: 20%; // optional spacing if some text is not visible because of the transform scale
}
zoom is not supported by FireFox.
Solutions below should work as you expect, only adjust numbers for your needs:
document.getElementById("pane-side").style.transform = "scale(0.5)";
document.getElementById("pane-side").style.transformOrigin = "left top";
document.getElementById("pane-side").style.width = "795px";
document.getElementById("pane-side").style.minHeight = "1700px";
document.getElementById("pane-side").style.alignSelf = "flex-start";
Or CSS version:
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
Or eventually <style> element added with JS:
var style = document.createElement('style');
style.innerHTML = `
#pane-side {
transform: scale(0.5);
transform-origin: left top;
width: 795px;
min-height: 1700px;
align-self: flex-start;
}
`;
document.head.appendChild(style);
Does this works for you?
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
Both -moz-transform and transform should be supported in FF.
It could be because of the differences between zoom and scale.
zoom is applied pre-render and changes the layout sizing of the element.
transform is applied post-render and doesn't change the layout sizing
The easiest way to see this is with a div sized relative to a fixed element.
On zoom, everything inside the div will zoom in/out, but the div stays the same
On scale, everything 'zooms' in/out, including the div
You Can Use CSS Variables Try this
document.getElementById("pane-side").style.setProperty('--zoom', '0.5');
*{
transform: scale(var(--zoom));
}
<h1 id="pane-side" >Firefox</h1>

how to Rotate image one side using jquery

I am trying to rotate a image only one corner.image is like a pole .bottom side should not be changed the position only top of the image should be animate either clockwise or anti clockwise.i have tried like this.i should work in IE8 also.i made left:53px because bottom should not be change the position.
<style>
.big-pole{
background-image: url("images/pole.png");
width: 55px;
height: 100px;
position: absolute;
top: 78px;
left: 53px;
}
</style>
<script>
TweenMax.to(".big-pole",3,{
top:'100px',
left:'53px',
});
</script>
You could apply CSS class to image without any need of external libraries.
.rotated {
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-moz-transform: rotate(90deg); /* Firefox */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
-o-transform: rotate(90deg); /* Opera */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* IE 8*/
}
I'm not really sure if I understand correctly what kind of rotation you are looking for? Is it like a clock as other users pointed out? Anyway your TweenMax call was missing some parameters in order for the rotation to work.
TweenMax.to($(".big-pole"), 3, {rotation:-90, transformOrigin:"top center"});
You will have test a few things and change a few value to find the correct animation, cause I might be wrong a bit, all depending on what you want to do in the end.

rotate text 330 degree in IE

is it possible to rotate text in IE
-moz-transform: rotate(330deg); /* FF3.5+ */
-o-transform: rotate(330deg); /* Opera 10.5 */
-webkit-transform: rotate(330deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=330deg)"; /* IE8 */
lines written for IE are not working.
Can any one help.
EDIT.
I want to rotate text crossed
As far as I am aware, rotation in IE is only possible in 90 degree intervals.
Check docs here:
http://msdn.microsoft.com/en-us/library/ms532918%28v=vs.85%29.aspx
As it was already pointed out, the solution you want depends on the targeted ie version.
You should use all the transforms with different vendor prefixes
-vendor-transform : rotate(330deg);
and for ie versions that do not support css rotation, you can convert the rotation into a filter matrix and apply it to the element.
Here's a site that automatically converts the css3 transform to a filter matrix :
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844387, M12=0.49999999999999994, M21=-0.49999999999999994, M22=0.8660254037844387, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.8660254037844387,
M12=0.49999999999999994,
M21=-0.49999999999999994,
M22=0.8660254037844387,
SizingMethod='auto expand');
The only downside is that in order to make the transform-origin the center of the element, oyu must provide the width and height of that element.
Have you already tried in this way:
<div id="rotation">Try this rotation</div>​
#rotation
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=..);
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
width:100px;
}​
like in this fiddle
Try this new example..
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8660253882408142, M12=0.5, M21=-0.5, M22=0.8660253882408142,sizingMethod='auto expand')"; /* IE6-8 */
This has working
if you want more rotation angle means visit http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm

Set the rotation point for CSS object

Is it possible to specify the rotation point when rotating a HTML element?
For example: if a HTML div has the left, top, width, height attributes: 0,0,100,100. The rotational point(the point we rotate the div around) will be 50,50(the midpoint). But I want to change the rotational point to 0,0.
I am rotating using the CSS 'transform' attribute:
#myDiv {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
/*Can I specify the rotational point???*/
transform: rotate(45deg) rotation-point:0px 0px; ??
}
There is a way to do it using the CSS 'rotation' attribute but W3Schools says that isn;t supported by major browsers:
rotation: 45deg;
rotation-point:0px 0px;
Yes, use the transform-origin CSS3 property.
http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property

jquery text rotation

I've got a simple text inside a div, something like the following;
<div id="banner">
<div>This is an example text</div>
</div>
I want the text inside the div to be rotated 20-30 degrees. I've already found this topic on stackoverflow about it and it gives me the desired result in Firefox and Chrome but not in IE7, IE8 and IE9. I also tried jquery rotate, but when using this it looks like the plugin is doing something with the div itself, making it disappear, instead of rotating the text inside the div. Is this even possible with javscript and/or css?
NOTE: Cufon is also being used.
Update after Codlers answer:
This is the current applied css after the answer of Codler. Works in FF and Chrome.
-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/
UPDATE 2:
IE7 and IE8 are rotating the text now, but in IE9 i'm getting a big black square behind my rotated text. What can be causing this? CSS is now as below;
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
background-color:transparent;
/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;
position:absolute;
padding : 45px 10px 15px 10px;
The Final working piece of code. Credits for this go toe Jeff and Codler.
HTML:
<div id="banner">
<div>This is an example text</div>
</div>
Default CSS:
#banner > div
{
-moz-transform: rotate(-20deg); /*FF*/
-o-transform: rotate(-20deg); /*Opera*/
-webkit-transform: rotate(-20deg); /*Safari, Chrome*/
-ms-transform: rotate(-20deg) !important; /*IE9*/
transform: rotate(-20deg); /*CSS3 default*/
background-color:transparent;
zoom: 1;
z-index:1; /*NEEDED FOR IE8*/
width: 191px;
position:absolute;
padding : 45px 10px 15px 10px;
}
CSS FOR IE 7 & 8 - Loaded conditionally:
#banner
{
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
padding-top:0px;
}
In standards-compliant browsers, you can use the CSS3 property transform, though it's probably a good idea to use vendor prefixes, e.g.:
-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
In Internet Explorer 6 and 7, things get tricky. You can use IE's filter property to do rotation.
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
will rotate the element 90 degrees. You can also rotate 180 or 270 degrees using rotation=2 or rotation=3
Do you want to rotate something in IE to a different angle? Are you ready for the headache?
You can use IE's filter property again and specify matrix coordinates, and get something really ugly like this:
progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');
There are instructions on how to use the Matrix coordinates on this page, but frankly none of them make any sense. A better solution is to use this handy Matrix calculator that will generate the CSS you need when you specify the angle in degrees.
You can check out the CSS on my site to see an example, but I haven't checked it using IE in a while, so I can't make any promises...
It is possible to rotate with css3
transform: rotate(20deg);
Remember that some browser require vendor prefix.
.box_rotate {
-moz-transform: rotate(20deg); /* FF3.5+
-o-transform: rotate(20deg); /* Opera 10.5
-webkit-transform: rotate(20deg); /* Saf3.1+, Chrome
-ms-transform: rotate(20deg); /* IE9
transform: rotate(20deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9
M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
zoom: 1;
}
Source http://css3please.com/
It seems as if the black square in the background in IE9 happens when those nasty proprietary filters are also in the selector where you are doing css transforms.
It's not really possible in IE. At best, IE can only rotate in multiples of 90 degrees, and even that's a pain (IIRC). However, this answer claims otherwise.
For modern browsers, use the transform, -webkit-transform, and -moz-transform, as suggested already.
You might be able to bodge it using VML (Vector Markup Language) in IE. I think it can do arbitrary rotations.
Use this tool to generate CSS that will work cross browser:
http://www.useragentman.com/IETransformsTranslator/index.html
It really does work.

Categories

Resources