I'd like to rotate an object from -180 degrees to 180 degrees via CSS3 transforms and transitions. This works fine, but I'd like to control the direction of rotation. How to determine if it will be going clockwise or counter clockwise?
0 .. 180 is clockwise, 0 .. -180 is counterclockwise. So, positive number rotates clockwise, negative - other way around. You can also keep increasing/decreasing the number to continue rotation, the browser will remove additional 360s.
I created an example of how to rotate:
<html>
<style type="text/css">
.rotatedDiv {
margin-top: 200px;
margin-left: 200px;
-webkit-transition: -webkit-transform 3s ease-in;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
}
</style>
<body>
<div class="rotatedDiv" onclick="this.style.webkitTransform='rotate(-100deg)'">
This div will do a spin when clicked!
</div>
</body>
</html>
First we display rotated div. When you click on it, it will rotate. Depending on the value - negative or positive it will rotate counter-clockwise or clockwise.
It seems that you also need to remember to put in the "from" initial concrete values, otherwise the +/- direction sign won't behave well.
Related
I know we can rotate an element anticlockwise by using negative sign
transform : rotate(-20deg);
But this is only for x-axis. I want to rotate element along the y-axis. i tried
transform : rotateY(-20deg);
this doesn't works it rotate the element in same direction as we are using:
transform : rotateY(20deg);
i am searching for an answer for half-hour . please help.
When you used transform : rotate(-20deg);, you said that it was only for x-axis.
So your question is: I want to rotate element along the y-axis.If you meant that you wanted to rotate your div vertically, then the code below might help:
.rotate-vertically {
height:100px;
width:100px;
background:red;
padding:10px;
text-align:center;
transition: all 1.0s linear;
}
.rotate-vertically:hover {
transform:rotateX(180deg);
}
<div class="rotate-vertically">Hover me!
</div>
More information here
Why doesn't it? It does. Or do you want to stretch the element? Then transform:scale() would help you.
div{
transform: scale(2,1);
margin-left:200px;
}
<div>text</div>
(adding also the left margin, since scaling pushes the element off the screen)
I am trying to apply a simple transform: rotateY(90deg) on an div but it's (the div) disappearing as a result, dev tools is not throwing any error on that line, any suggestions or anything I might be missing?
This happens because when you rotate something on the Y axis by 90 degrees it has spun so that it's essentially facing a different direction. In the below example I've added a transition to show how the element changes over time (hover over it):
figure {
background: red;
height: 100px;
transition: 1s;
width: 100px;
}
div:hover figure {
transform: rotateY(90deg);
}
<div>
<figure></figure>
</div>
As our viewport looks directly onto the element and features no depth, it appears that the element has disappeared altogether.
If we do add some depth, it's easier to visualise what's happening:
The cube on the left is our pre-transform cube and the cube on the right is our cube after it's had rotateY(90deg) applied to it. As we have no depth at all and we're looking at our element front on, we can't see anything when it gets rotated by 90 degrees.
I am trying to get my div to rotate 360deg every time I click it, using CSS3 transform rotate. However, I'm also using the CSS3 transform translate to vertically align my div.
On the first click, it applies all the required CSS but doesn't actually rotate, however will rotate all clicks after that. It stays vertically aligned the whole time.
Unsure how to solve this and any help is appreciated :)
My css:
#my-div {
height: 300px;
width: 300px;
transition: all 0.5s ease-in-out;
display: block;
margin: auto;
/*to vertically align*/
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
My javascript
var angle = 360
$('#my-div').click(function() {
$(this).css({
'-webkit-transform' : 'translateY(-50%) rotate('+angle+'deg) ',
'transform' : 'translateY(-50%) rotate('+angle+'deg)'
})
angle += 360
});
In fact the transition works properly only when the 2 ends are explicitly set, here intially the rotate transform is not set explicitly, after the first click, it's explicitly set to rotate(360deg) and hence the next clicks work. To solve this, you just need to apply rotate(0deg) for your div initially via the CSS code:
#my-div {
/*...*/
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
Note that I emphasized on the properly word, in fact if you set the initial angle to some angle equal or smaller than 180deg, you'll see it transitions OK. I doubt that if you don't set the initial rotate transform explicitly, the behavior is determined by the browser, that is 360deg won't make any transition, otherwise the rotating transition may be clockwise (if the angle % 360 is less than or equal to 180deg) and counter-clockwise if the angle % 360 is greater than 180deg (note about the modulo operation between angle and 360).
Demo.
If you put in css transform: rotateY(-30deg) vs transform: rotateY(30deg). You will have two different results, the results you would expect. Rotate in one direction or the other. Same with Z axis.
But with X axis it doesnt seem to be the case. I want top side to come in front while bottom side to go back when rotating over X axis.
Check out the demo:
http://jsfiddle.net/techsin/x5Qgx/3/
Is it bug in css?
I know I could give it value like 330 or something but that rotates it two times and messes up the animation I want. If it wasn't for the animation I'd have used that.
Sooo frustrating.
It works for Y, Z but why not for X?
Because it is showing the orthographic projection.
You need to define the perspective to the parent element:
-webkit-perspective: 500px;
-moz-perspective: 500px;
-o-perspective: 500px;
perspective: 500px;
More info at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective
Is it possible to specify an origin at the top left (0%, 0%) for scaling, and a different origin (center) for rotation in CSS3? I am only working with webkit, if that helps.
I am currently using a transform list (i.e. -webkit-transform: scale(newScale) rotate(newRotate)
but it seems like it isn't possible to change the origin in-between passes. Is there a better way to look at this? Presently, if I scale an object and rotate it with an origin at the default center, the position of the element is now off and so when you drag the element, the cursor is still at the top left of the element, whereas it should be at the center. Changing the origin to the center to scale it fixes this, but presents new problems with rotation and flipping.
Found a good solution to the problem... by creating a parent/child relationship as follows:
<div class="container">
<img src="" />
</div>
I can now setup two classes as follows:
.container {
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5);
}
.container img {
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
}
This will do exactly what I want: scale with an origin at the top left, then rotate with the origin at the center. Voila!
Instead think of the scaling with origin (0,0) as a scaling+translation with origin center. In isolation the following:
-webkit-transform-origin: top left;
-webkit-transform: scale(1.5);
is the same as:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) translate3d(16.66%, 16.66%, 0);
In theory the rotation origin center should leave the corners sticking out by sqrt(1/2)-0.5 requiring us to move the origin down and right by 20.71%, but for some reason the webkit transform algorithm moves things down for us (but not quite enough) and scales the origin for us (again not quite). Thus we need to move right by 50% and make some adjustments for this odd behavior:
-webkit-transform-origin: center;
-webkit-transform: scale(1.5) rotate(45deg) translate3d(52.5%, 0.5%, 0);
-webkit-transition: all 2s ease-in;
Note: my original answer was using a div with width:100px; and height100px; which requires a translate3d(54px, 0, 0).
What about that: http://jsfiddle.net/22Byh/1/