I will try my best to describe, hopefully this makes sense...
I want to have several circles on top of each other, then using css animation, I would like the circles to follow a half circle/elipse path away from the centre at different angles finishing in a circle of circles around the starting point...
I have figured out how to get an animation to "Orbit" a central point but I cant find a way to change the angle of the orbit.
#keyframes curveBall {
0% {
transform: rotate(0deg) translateX(150px);
}
100% {
transform: rotate(360deg) translateX(150px);
}
}
I have thought of creating several orbits that all intersect in the middle but orbit away in different directions, then getting the orbits to start at the intersection and then only perform a part of the orbit but I still cant figure out how to get it to work. Any help would be appreciated, Thanks.
EDIT: Here is a Demo which kind of shows where I am trying to get to
http://dabblet.com/gist/f30d86cebe9790faadf6
Related
I am working on this 3 panel card opening animation.. Here is an example of what I have so far.. example. This is the class that I'm applying for the second animation and transform-origin just doesn't seem to do what I think it should.. But I'm pretty new at this animation stuff.
.two-right {
transform: rotateY(170deg);
transform-origin: 100% 0;
}
As you can see the problem is that I cant get the second animation to open correctly.. On the left side it works just fine but on the right the card isn't opening correctly on the right side of the card.. Right now I'm just poking around and haven't been able to find anything. Any help would be appreciated.
Okay I found the answer to my own question.. The reason is that the flip is based on it's parent.. That's why it is rotating on the wrong axis but after it's scaled and the animation is complete it ends up being positions in the correct location.
Instead of trying to do the animations I put a timeout in the javascript to let it scale and then add the flip animation later. Here is the completed code.
Complete example
.two-right {
/* transform: rotateY(170deg); */
transform-origin: 100% 0;
}
.two-flip {
transform: rotateY(160deg);
}
I first add the .two-right class and then the .two-flip half a second later.
I was having an issue where I was attempting to rotate two halves of an image in opposite directions around the y-axis with these two animations:
#-webkit-keyframes first{
0% { -webkit-transform: rotateY(0); }
100% { -webkit-transform: rotateY(-90deg); }
}
#-webkit-keyframes second{
0% { -webkit-transform: rotateY(0);}
100% { -webkit-transform: rotateY(90deg); }
}
Despite the different values for the last keyframe, the two animations rotated in the same direction. Someone rightly pointed out that I needed to apply perspective to my containing space in order to make the effect function (note the checkbox that will apply and remove the perspective from the 3d space to demonstrate):
http://jsfiddle.net/eveQt/12/ - Chrome only
I am curious why this is. From MDN:
The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
From my understanding, perspective moves the viewer along the z plane, making the 3d effect more or less intense. What I don't understand is how moving along the z plane would affect the direction of rotation of an element in such a fashion. I would have thought that perspective would only affect how dramatic the effect is, and not the direction in which the element rotates.
Obviously, application of perspective is a required for the proper rotation direction of each half of the image in my example, but why?
Both halves are rotating correctly around the Y axis, in opposite directions. The trouble is, without perspective, they do not look like they are rotating differently.
Applying perspective in this case basically makes one side of the image larger than the other side, as it rotates around the Y-axis. If there is no perspective, both sides of the image remain the same size, regardless of the direction the image is spinning.
Have a look at the whole image rotating without perspective, and imagine it is rotating in one direction. Then close your eyes, and when you open them again, imagine it is rotating in the other direction. Magic!
In essence, I need to have my div transformed to position itself like the top side of this box (ignoring the radius border, logo, gradient, etc.)
In order to do so, I need to
Rotate the element to the proper angle, which I know how to do using transform:rotate(45deg). Example here. The problem with this is that there is no depth, it just looks like a rotated square because that's what it is. I want it to look like a plane that something could be set on
Add the perception of depth on the element, which I also know how to do using Craig Buckler's approach. Example here
Combine the two effects on the element at the same time. This is the part that I cannot seem to get correct
My basic code
/* HTML */
<div id='square'></div>
/* CSS (without any transforms) */
#square {
width:150px;
height:150px;
background:black;
position:absolute;
top:50%; left:50%;
margin-left:-75px;
margin-top:-75px;
}
I thought I could get the effect I'm looking for by simply combining the two, using
transform: rotate(45deg) perspective(300px) rotateX(25deg);
but I found it was not so. Example here. The problem with this one is that it still does the rotateX based on the original orientation of the element, not the rotated version. Thus, it does not have the proper effect
I thought I could make it take the rotated angle of 45deg into consideration for the rotateX if I applied the rotate(45deg) to a container element, but this was also to no avail. Example here
I have tried variations of these approaches but (of course) have yet to get the effect I'm looking for
Do you have any idea how I can properly achieve this effect?
The correct transform is
perspective(300px) rotateX(25deg) rotate(45deg);
You want the plane where the element is to be always facing you, so first of all you rotate in X. This sets a plane that at the bottom is near you and at the top is far from you, and you don't want this plane to rotate, so you can't place a rotation before it.
Once you have set this plane, then, inside it, you rotate the div.
Maybe this fiddle makes it more clear, hover the div to see the rotation plane.
I have a requirement, that needs to rotate an image with some realistic sense - on a skewed horizontal plane with eye level, imagine a spinning flying disc or helicopter blades.
By that I mean, (not a flat rotation like a spinner) but something that gets bigger when it its facing your disappears as it spins back - on a skewed horizontal plane with eye level.
objective is to get a realistic look with an icon or an image, where it looks like its rotating in 2.5D with HTML
Can this done with HTML5 simply, with out a canvas.
Can you share an example with either canvas or straight HTML5 trickery
You can do this in CSS3 using a 3D transform:
transform: rotateX(45deg);
And on the container:
perspective: 500px;
Experiment with the exact values to get the effect you want.
Given a square, how can I rotate it such as the element flips with its diagonal being the origin of rotation? I managed to flip it using:
-webkit-transform: rotateX(90deg) rotateZ(90deg) rotateY(-90deg);
you can see an example here
but this does not rotate on the diagonal axis. How can I achieve that? Basically what I am trying to achieve is that when the element rotates, its top right corner, and bottom left corner don't go out of place.. Thanks and sorry for my bad English/explanation :S!
It looks like I'm a bit late to the party, but
-webkit-transform: rotate3d(-2,1, 0,-180deg);
may give you the behavior you're looking for.
as you can see at this jsfiddle, a combination of matrix-transformation and scaling works. with a background-image the effect gets more obvious.
If I understand your problem correctly, you just need to add this:
-webkit-transform-origin: left bottom
If that isn't it exactly look here for information on how to change the origin of the rotation: https://developer.mozilla.org/en/CSS/transform-origin