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.
Related
I know it works because I have used it in the past, however this time around it is giving me a hard time and I ma not sure what I am doing wrong.
<Icon type={sensorKey} style={sensorKey==='car'?[{...activityStyles.icon}, {transform: [{ rotateY: '180deg'}]}]:activityStyles.icon} size={Typography.bodyLineHeight} />
Just set: transform: rotateY(180deg).
We need you to provide an example of your html and css in order to give you the help you are asking for. Without it all we can do it guess.
But I will take a stab at it (note I added more for cross browser functionality):
-ms-transform: rotateY(180deg); /* IE 9 */
-webkit-transform: rotateY(180deg); /* Safari 3-8 */
transform: rotate(180deg);
I Want to rotate an image on an arbitrary point in JavaScript. I am using save and restore APIs, but it rotates the image according to input angle not about center point(arbitrary point).
img {
width: 200px;
height: 100px;
/* Rotate div */
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
Can anybody tell me which is the best way to display an image like this?
There are multiple ways to do it, you just have to assess the various degrees of browser support for each:
CSS Masks do this really well:
http://thenittygritty.co/css-masking
But I think they probably have the worst browser support.
I believe you can also do masking with SVG, but SVG isn't supported all that well anyways either, and has a bit of learning curve to it.
The way I would probably do it would be with a hacky little use of transform: rotate();
.image-shape {
height: 150px;
background: url(http://imagz.inspiredmagz.netdna-cdn.com/wp-content/uploads/2013/05/3D-Illustrations-by-JR-Schmidt-08.jpg);
position: relative;
}
.image-shape .point {
width: 50px;
height: 50px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -25px;
right: -25px;
background: #777;
overflow: hidden;
}
.image-shape .point img {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: -275px;
left: -85px;
}
Where you have a div with the background image set, and then another div rotated 45 degrees and positioned to form the 'point' at the bottom. Inside this you put the image, rotate that back 45 degrees and position it to line up with the background image of the first div. (positioning it is a pain, because of the rotations, but as long as this doesnt need to scale, once you do it it's good to go.
The additional parts of the image are cut off by setting overflow: hidden; on the point div, and then again on a main container div around all of this.
See this fiddle for the html and the rest of the css:
http://jsfiddle.net/BszC3/
The reason that I would use this method is because rotation is relatively well supported, and can be achieved in IE with their proprietary filters:
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
The downside is that it's a fair bit of work, and seems like a total hack.
Your best bet is still just to cut your image out like this and not bother with any crazy CSS.
You can use an html5 canvas:
http://jsfiddle.net/HDqE8/
An alternative without html5 is using a masking image (an image with a transparent part in the middle, with the shape you like, and the rest with the background color). Then you just have to overlap the 2 images and put the first on top. The image could be also an svg.
My CSS looks as follows:
.block1 {
height:20px;
width:70px;
background-color:#09F;
background-repeat:no-repeat;
position:absolute;
}
This draws a rectangle. Next i would like to draw a rectangle on an angle, such as at 45 degrees. I am not aware of an angle option, how could i do this?
It's not fully supported in all browsers, but you can use CSS Rotation. Here's an article on it.
Basically, apply:
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* WebKit (Chrome, Safari) */
-o-transform: rotate(45deg); /* Opera */
-ms-transform:rotate(45deg); /* IE9 */
transform: rotate(45deg); /* No support currently, but hooray future! */
/* Fun IE code (you should probably put this in a separate css file controlled with conditional comments) */
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.7071067811865474,
M12=-0.7071067811865477,
M21=0.7071067811865477,
M22=0.7071067811865474,
SizingMethod='auto expand');
/* These are necessary for the IE code only */
margin-left: 5px;
margin-top: -70px;
IE code generated with this tool, which is incredibly useful.
You should use transform (from CSS3) with the value rotate(45deg), and the vendor prefixed property variants:
See: http://jsfiddle.net/JngyN/
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
Making it work properly in older versions of IE is.. difficult.
I recommend that you use this tool which makes it relatively easy:
http://www.useragentman.com/IETransformsTranslator/index.html
here is the IE version for matrix
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071, M12=-0.7071, M21=0.7071, M22=0.7071, SizingMethod='auto expand');
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.